import React, { useContext, useEffect, useState } from "react";
import { Form, Modal } from "react-bootstrap";
import "./OrderTrackModal.css";
import OrderInfoForModal from "./order_info_for_modal/OrderInfoForModal";
import OrderProgressStepper from "./order_progress_stepper/OrderProgressStepper";


function OrderTrackModal(props) {

    const { show, onHide, modal_title, order ,data} = props;


    const handleReasonChange = (event) => {
        props.setValue("order_cancel_reason_id", event.target.value);
    };

    return (
        <Modal
            show={show}
            onHide={onHide}
            size="md"
            className="OrderTrackModal Modal-holder"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <div className="heading_part">
                <OrderInfoForModal data={data} order={order} onHide={onHide}/>
            </div>
            <Modal.Body>

                <div className="main_container">


                    <div className="stepper">
                        <OrderProgressStepper order={order} data={data} />
                    </div>

                    <div className="">
                        <div className='img_holder'>
                            <img
                                src={
                                    process.env.PUBLIC_URL +
                                    "/assets/images/modal/track_order.png"
                                }
                            />
                        </div>
                    </div>
                </div>

            </Modal.Body>
        </Modal>
    );
}

export default OrderTrackModal;
