import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { PropTypes } from "prop-types";
import { useEffect, useState } from "react";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineDot from "@mui/lab/TimelineDot";
import TimelineConnector from "@mui/lab/TimelineConnector";
import { Grid } from "../../../../components/grid/Grid";
import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
import { Typography } from "@mui/material";
import TimelineContent from "@mui/lab/TimelineContent";
import { SPACING } from "../../../../data/spacing";
import TimelineItem from "@mui/lab/TimelineItem";
import { formatTime } from "../../../../utils/formatTime";
import { format } from "date-fns-jalali";

export const ProvinceInformation = ({ file, quantity }) => {
  const [provinceInfoData, setProvinceInfoData] = useState({
    provinceOperatorName: "اپراتور استان",
    provinceOperatorMobile: "-",
    acceptedRejectedDate: null,
    provinceState: "در انتظار تایید",
  });

  const { province, provinceOperator } = file;

  useEffect(() => {
    let provinceOperatorName,
      provinceOperatorMobile,
      acceptedRejectedDate,
      provinceState;
    if (province) {
      provinceOperatorName = province.provinceOperatorName;
      provinceOperatorMobile = province.provinceOperatorMobile;
      acceptedRejectedDate = province.acceptedRejectedDate;
      provinceState =
        province.provinceState === "accept" ? "تایید شده" : "رد شده";
    } else {
      provinceOperatorName = provinceOperator?.provinceOperatorName;
      provinceOperatorMobile = provinceOperator?.provinceOperatorMobile;
      acceptedRejectedDate = null;
      provinceState = "در انتظار تایید";
    }
    setProvinceInfoData({
      provinceOperatorName,
      provinceOperatorMobile,
      acceptedRejectedDate,
      provinceState,
    });
  }, [province]);

  return (
    <>
      <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <Grid container direction="column" flexWrap="nowrap" flex="1">
          <Grid container>
            <Grid>
              <TimelineOppositeContent>
                <Typography variant="body1" fontWeight="bold">
                  مرحله استان
                </Typography>
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Grid container gap={SPACING.SMALL}>
                  {provinceInfoData.provinceState === "در انتظار تایید" ? (
                    <Typography
                      variant="body2"
                      display="flex"
                      gap={SPACING.SMALL}
                    >
                      درخواست منتظر انجام عملیات توسط اپراتور می باشد.
                    </Typography>
                  ) : (
                    <>
                      <Typography
                        variant="body2"
                        display="flex"
                        gap={SPACING.SMALL}
                      >
                        درخواست در تاریخ
                      </Typography>
                      <Typography variant="body2" fontWeight="bold">
                        {provinceInfoData.acceptedRejectedDate
                          ? formatTime(provinceInfoData.acceptedRejectedDate)
                          : "-"}
                      </Typography>
                      <Typography
                        variant="body2"
                        display="flex"
                        gap={SPACING.SMALL}
                      >
                        {provinceInfoData.provinceState} است.
                      </Typography>
                    </>
                  )}
                </Grid>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid>
            <Grid xs={12}>
              <SimpleTable
                columns={[
                  "نام اپراتور",
                  "تلفن",
                  "استان",
                  "تاریخ بررسی",
                  "وضعیت درخواست",
                  "وضعیت تخصیص",
                  province?.provinceMessage ? "دلیل رد" : "",
                ]}
                data={[
                  [
                    provinceInfoData.provinceOperatorName,
                    provinceInfoData.provinceOperatorMobile,
                    provinceOperator.provinceOperatorProvinc,
                    format(
                      new Date(provinceInfoData.acceptedRejectedDate),
                      "yyyy/MM/dd"
                    ),
                    provinceInfoData.provinceState,
                    quantity !== 0 ? "در انتظار تخصیص استان" : "تخصیص داده شده",
                    province?.provinceMessage ? province?.provinceMessage : "",
                  ],
                ]}
              />
            </Grid>
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};

ProvinceInformation.propTypes = {
  file: PropTypes.any,
  quantity: PropTypes.any,
};
