import { PropTypes } from "prop-types";
import { useEffect, useState } from "react";
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 { formatTime } from "../../../../utils/formatTime";

export const CityInformationTitle = ({ file }) => {
  const [cityInfoData, setCityInfo] = useState({
    cityOperatorName: "اپراتور شهرستان",
    cityOperatorMobile: "-",
    acceptedRejectedDate: "",
    cityState: "در انتظار تایید",
  });

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

  return (
    <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>
  );
};

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