import React from "react";
import Box from "@mui/material/Box";

import "./OrderProgressStepper.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleCheck, faPhone } from "@fortawesome/free-solid-svg-icons";



export function VerticalLinearStepper({ order, data }) {


  const OrderStatusIds = {
    Accept: 2,
    Preparing: 3,
    OrderUnderQualityCheck:4,
    Pickup: 5,
    Delivered: 6,
    Cancelled: 7,
    Returned: 8,
    Refunded: 9,
    Replaced: 10,
  };

  const steps = [
    {
      label: "Accepted Your Order",
      description: "Your order has been received.",
      status: "completed",
      status:
        data?.order_status_id == OrderStatusIds.Accept
          ? "completed"
          : data?.order_status_id >= OrderStatusIds.Accept
          ? "completed"
          : "disabled",
    },
    {
      label: "Preparing Your Order",
      description: "Your order will be ready to pick up shorty",
      status: "completed",
      status:
        data?.order_status_id == OrderStatusIds.Preparing
          ? "completed"
          : data?.order_status_id >= OrderStatusIds.Preparing
          ? "completed"
          : "disabled",
    },
    {
      label: "Order under Quality Check",
      description: "Your order has been recieved",
      status:
        data?.order_status_id == OrderStatusIds.OrderUnderQualityCheck
          ? "completed"
          : data?.order_status_id >= OrderStatusIds.OrderUnderQualityCheck
          ? "completed"
          : "disabled",
    },
    {
      label: "Order Picked up",
      status:
        data?.order_status_id == OrderStatusIds.Pickup
          ? "completed"
          : data?.order_status_id >= OrderStatusIds.Pickup
          ? "completed"
          : "disabled",
    },
    data?.order_status_id != OrderStatusIds.Cancelled
      ? {
          label: "ORDER READY TO DELIVER",
          status:
            data?.order_status_id == OrderStatusIds.Delivered
              ? "completed"
              : data?.order_status_id == OrderStatusIds.Delivered
              ? "completed"
              : "disabled",
        }
      : {
          label: "ORDER READY TO DELIVER",
          status:
            data?.order_status_id == OrderStatusIds.Cancelled
              ? "completed"
              : "disabled",
        },
  ];

  return (
    <Box sx={{ maxWidth: 400 }} className="stepper_box">
      <div className="simple-stepper">
        {steps.map((step, index) => (
          <div key={index} className={`step ${step.status}`}>
            <div className="circle">
              {step.status === "completed" ? (
                <FontAwesomeIcon
                  icon={faCircleCheck}
                  className="completed_step"
                />
              ) : step.status === "active" ? (
                <div className="current_step_outer_circle">
                  <div className="current_step_inner_circle"></div>
                </div>
              ) : (
                <div className="disabled_outer">
                  <div className="circle-status disabled"></div>
                </div>
              )}
            </div>
            <div
              className={`content ${
                step.status === "disabled" ? "disabled-content" : ""
              }`}
            >
              {index === 1 ? (
                <div className="">
                  <p
                    className={`label ${
                      step.status === "disabled" ? "disabled-label" : ""
                    }`}
                  >
                    {step.label}
                  </p>
                  {/* <p className="description">{step.description}</p> */}

                  {/* <Link to={`tel:+${order?.delivery_boy?.contact_no}`}>
                                        <div className="call_icon_holder">
                                            <div className="icon_holder">
                                                <FontAwesomeIcon icon={faPhone} className="call_icon" />
                                            </div>
                                            <div className="">
                                                <p className="icon_text">Call Store   </p>
                                            </div>
                                        </div>
                                    </Link> */}
                </div>
              ) : index !== 1 ? (
                <div className="">
                  <p
                    className={`label ${
                      step.status === "disabled" ? "disabled-label" : ""
                    }`}
                  >
                    {step.label}
                  </p>
                  {/* <p className="description">{step.description}</p> */}
                </div>
              ) : null}
            </div>
          </div>
        ))}
      </div>

      {/* <Stepper activeStep={activeStep} orientation="vertical">
                {steps.map((step, index) => (
                    <Step
                        key={step.label}
                        completed={completedSteps.includes(index)}
                        disabled={step.disabled}
                    >
                        <StepLabel
                            StepIconComponent={(props) => (
                                <CustomStepIcon {...props} disabled={step.disabled} />
                            )}
                            classes={{
                                labelContainer: step.disabled ? "disabled_label" : "",
                            }}
                        >
                            <div
                                className={`step_data_container ${step.disabled ? "disabled_container" : ""
                                    }`}
                            >
                                <div className="main_step">
                                    <p className={`title ${step.disabled ? "disabled_text" : ""}`}>
                                        {step?.label}
                                    </p>
                                    <p
                                        className={`sub_title ${step.disabled ? "disabled_text" : ""
                                            }`}
                                    >
                                        {step.description}
                                    </p>
                                </div>
                            </div>
                        </StepLabel>
                    </Step>
                ))}
            </Stepper> */}
    </Box>
  );
}

const OrderProgressStepper = ({ order, data }) => {
  return (
    <div className="OrderProgressStepper">
      <VerticalLinearStepper order={order} data={data} />
    </div>
  );
};

export default OrderProgressStepper;
