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="img_holder"></div>
        </div>
      </Modal.Body>
    </Modal>
  );
}

export default OrderTrackModal;
