import {
  TimelineConnector,
  TimelineContent,
  //   TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import React from "react";
// import { formatTime } from "../../../../utils/formatTime";
import { PropTypes } from "prop-types";
import { Grid } from "../../../../components/grid/Grid";

import CheckRequestItem from "../check-request-item/CheckRequestItem";
import { SPACING } from "../../../../data/spacing";

const SlaughterCheckRequest = ({ item }) => {
  //   useEffect(() => {
  //     if (file.city !== null) {
  //       setIsSubmited(true);
  //     }
  //   }, []);

  // const animationControl = useAnimation();

  // useEffect(() => {
  //   ("eeeeeee", isDenyed);
  //   if (isDenyed) {
  //     animationControl.start({
  //       x: -10,
  //       display: "block",
  //       transition: { duration: 0.3 },
  //     });
  //   }
  // }, [isDenyed]);

  // const MotionInput = motion(TextField);

  return (
    <>
      <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
        <TimelineSeparator>
          <TimelineDot color="secondary" />
          <TimelineConnector />
        </TimelineSeparator>
        <Grid container direction="column" flexWrap="nowrap" flex="1">
          <Grid container>
            <Grid>
              <TimelineOppositeContent
                variant="body1"
                fontWeight="bold"
                color="secondary"
              >
                انجام عملیات
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Typography variant="body2">
                  در این مرحله تخصیص را تایید یا رد کنید.
                </Typography>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid>
            <Grid
              container
              direction="column"
              alignItems="start"
              mt={SPACING.TINY}
              key={item.date.valueOf()}
            >
              <CheckRequestItem
                key={item.provinceKillReqKey}
                reqKey={item.provinceKillReqKey}
                poultryRequestKey={item.poultryReqKey}
              />
            </Grid>
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};
SlaughterCheckRequest.propTypes = {
  item: PropTypes.object,
  i: PropTypes.any,
  poultryRequestKey: PropTypes.any,
};

export default SlaughterCheckRequest;
