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>
    </Box>
  );
}

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

export default OrderProgressStepper;
