import {
  Timeline,
  TimelineConnector,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { IconButton, Typography } from "@mui/material";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../../data/spacing";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
import { getVetFarmInspectionHistory } from "../../services/vet-farm-get-inspection-history";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
export const VetFarmInspectionHistory = () => {
  const navigate = useNavigate();

  const { inspectionid } = useParams();
  const id = inspectionid;
  const { vetFarmInspectionHistory, pending } = useSelector(
    (state) => state.vetFarmSlice
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getVetFarmInspectionHistory(id));
  }, []);

  return (
    <>
      {!pending && (
        <Grid mt={SPACING.MEDIUM}>
          <Grid container alignItems="center">
            <IconButton
              aria-label="delete"
              color="primary"
              onClick={() => navigate(-1)}
            >
              <NavigateNextIcon />
              <Typography>بازگشت</Typography>
            </IconButton>
          </Grid>

          <Timeline
            sx={{
              gap: SPACING.MEDIUM,
            }}
          >
            {vetFarmInspectionHistory?.map((item, i) => {
              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">
                              بازرسی مورخ {formatJustDate(item.createDate)} ساعت{" "}
                              {formatJustTime(item.createDate)}
                            </Typography>
                          </TimelineOppositeContent>
                        </Grid>
                      </Grid>
                      <Grid container xs={12}>
                        <Grid xs={12}>
                          <SimpleTable
                            columns={[
                              "موضوع بازرسی",
                              "توضیحات",
                              "تلفات",
                              "تصویر",
                            ]}
                            data={[
                              [
                                item.topic,
                                item.description,
                                item.Losses,
                                item.image.length
                                  ? item.image.map((item, i) => {
                                      return [
                                        <Grid
                                          display="inline-flex"
                                          key={`SlaughterPaymentFactorImage${i}`}
                                        >
                                          <a href={item} alt="دانلود">
                                            <img
                                              src={item}
                                              width="80"
                                              height="80"
                                              alt="دانلود"
                                              style={{
                                                marginRight: "10px",
                                                borderRadius: "5px",
                                              }}
                                            />
                                          </a>
                                        </Grid>,
                                      ];
                                    })
                                  : "بدون پیوست",
                              ],
                            ]}
                          />
                        </Grid>
                      </Grid>
                    </Grid>
                  </TimelineItem>
                </>
              );
            })}
            {!vetFarmInspectionHistory?.length && (
              <Typography variant="body1" component="span">
                برای این مرغداری بازرسی ثبت نشده است.
              </Typography>
            )}
          </Timeline>
        </Grid>
      )}
    </>
  );
};
