import { Step, StepLabel, Stepper, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useEffect, useState } from "react";

export const ProvinceCaseSteps = ({ stepClickedHandler, item }) => {
  const [currentStep, setCurrentStep] = useState(0);

  useEffect(() => {
    let step = 0;

    if (
      item?.cityState?.state === "reject" ||
      item?.provinceState?.state === "reject"
    ) {
      step = -1;
    } else {
      if (item?.cityState?.date) {
        step = 1;
      }
      if (item?.provinceState?.date) {
        step = 2;
      }
      if (
        item?.provinceKillRequests?.provinceKillRequestSerializer.length > 0
      ) {
        step = 3;
      }
      if (item?.killHouseRequests?.killHouseRequestsSerializer.length > 0) {
        step = 4;
      }
      if (
        item?.killHouseRequests?.killHouseRequestVetCheckSerializer?.length > 0
      ) {
        step = 5;
      }
      if (
        item?.killHouseRequests?.killHouseRequestAssignmentSerializer?.length >
        0
      ) {
        step = 6;
      }
    }

    setCurrentStep(step);
  }, [item]);

  const steps = item.out
    ? ["درخواست کشتار", "تایید شهرستان", "تایید استان"]
    : [
        "درخواست کشتار",
        "تایید شهرستان",
        "تایید استان",
        "تخصیص به خریدار",
        "ایجاد بار",
        "تخلیه",
        "اطلاعات بار",
        "اطلاعات پرداخت",
      ];

  const isStepFailed = (step) => {
    let isFailed = false;
    switch (step) {
      case 1:
        isFailed = item?.cityState?.state === "reject";
        break;
      case 2:
        isFailed = item?.provinceState?.state === "reject";
        break;
      default:
        break;
    }
    return isFailed;
  };

  return (
    <Grid
      container
      width="100%"
      mt={SPACING.MEDIUM}
      justifyContent="start"
      alignItems="center"
    >
      <Grid display={{ xs: "none", sm: "grid" }} width="100%">
        <Stepper activeStep={currentStep} alternativeLabel>
          {steps.map((label, index) => {
            const labelProps = {};
            if (isStepFailed(index)) {
              labelProps.optional = (
                <Typography variant="caption" color="error">
                  پرونده در این مرحله رد شد.
                </Typography>
              );
              labelProps.error = true;
            }

            return (
              <Step
                sx={{ cursor: "pointer" }}
                key={label}
                onClick={() => {
                  if (currentStep >= index) {
                    stepClickedHandler(index);
                  }
                }}
              >
                <StepLabel {...labelProps}>{label}</StepLabel>
              </Step>
            );
          })}
        </Stepper>
      </Grid>
      <Grid display={{ xs: "block", sm: "none" }}>
        <Stepper activeStep={currentStep} orientation="vertical">
          {steps.map((label, index) => {
            const labelProps = {};
            if (isStepFailed(index)) {
              labelProps.optional = (
                <Typography variant="caption" color="error">
                  پرونده در این مرحله رد شد.
                </Typography>
              );
              labelProps.error = true;
            }

            return (
              <Step
                key={label}
                onClick={() => {
                  if (currentStep >= index) {
                    stepClickedHandler(index);
                  }
                }}
              >
                <StepLabel {...labelProps}>{label}</StepLabel>
              </Step>
            );
          })}
        </Stepper>
      </Grid>
    </Grid>
  );
};
