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 CityInformation = ({ file }) => {
  const [cityInfoData, setCityInfo] = useState({
    cityOperatorName: "اپراتور شهرستان",
    cityOperatorMobile: "-",
    cityUnionName: "-",
    acceptedRejectedDate: "",
    cityState: "در انتظار تایید",
  });

  const { city, cityOperator } = file;
  useEffect(() => {
    let cityOperatorName,
      cityOperatorMobile,
      acceptedRejectedDate,
      cityState,
      cityUnionName;
    if (city) {
      cityOperatorName = city.cityOperatorName;
      cityOperatorMobile = city.cityOperatorMobile;
      acceptedRejectedDate = city.acceptedRejectedDate;
      cityUnionName = city.unitName;
      cityState = city.cityState === "accept" ? "تایید شده" : "رد شده";
    } else {
      cityOperatorName = cityOperator?.cityOperatorName;
      cityOperatorMobile = cityOperator.cityOperatorMobile;
      cityUnionName = cityOperator.unitName;
      acceptedRejectedDate = null;
      cityState = "در انتظار تایید";
    }
    setCityInfo({
      cityOperatorName,
      cityOperatorMobile,
      acceptedRejectedDate,
      cityUnionName,
      cityState,
    });
  }, [city]);

  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}>
                  <Grid container gap={SPACING.SMALL}>
                    {cityInfoData.cityState === "در انتظار تایید" ? (
                      <Typography
                        variant="body2"
                        display="flex"
                        gap={SPACING.SMALL}
                      >
                        درخواست منتظر انجام عملیات توسط اپراتور می باشد.
                      </Typography>
                    ) : (
                      <>
                        <Typography
                          variant="body2"
                          display="flex"
                          gap={SPACING.SMALL}
                        >
                          درخواست در تاریخ
                        </Typography>
                        <Typography variant="body2" fontWeight="bold">
                          {cityInfoData.acceptedRejectedDate
                            ? formatTime(cityInfoData.acceptedRejectedDate)
                            : "-"}
                        </Typography>
                        <Typography
                          variant="body2"
                          display="flex"
                          gap={SPACING.SMALL}
                        >
                          {cityInfoData.cityState} است.
                        </Typography>
                      </>
                    )}
                  </Grid>
                </Grid>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid>
            <Grid xs={12}>
              <SimpleTable
                columns={[
                  "نام اپراتور",
                  "نام اتحادیه",
                  "تلفن",
                  "استان",
                  "شهر",
                  "تاریخ بررسی",
                  "وضعیت",
                  city?.cityOperatorMessage ? "دلیل رد" : "",
                ]}
                data={[
                  [
                    cityInfoData.cityOperatorName,
                    cityInfoData.cityUnionName,
                    cityInfoData.cityOperatorMobile,
                    cityOperator.cityOperatorProvince,
                    cityOperator.cityOperatorCity,
                    cityInfoData?.acceptedRejectedDate
                      ? format(
                          new Date(cityInfoData?.acceptedRejectedDate),
                          "yyyy/MM/dd"
                        )
                      : "",
                    city?.provinceAccept
                      ? "تایید شده توسط استان"
                      : cityInfoData.cityState,
                    city?.cityOperatorMessage ? city?.cityOperatorMessage : "",
                  ],
                ]}
              />
            </Grid>
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};

CityInformation.propTypes = {
  file: PropTypes.any,
};