import { IconButton, Typography } from "@mui/material";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { avicultureGetHallInspects } from "../features/aviculture/services/aviculture-get-hall-inspects";
import { LOADING_END, LOADING_START } from "../lib/redux/slices/appSlice";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { Grid } from "../components/grid/Grid";
import {
  Timeline,
  TimelineConnector,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { SPACING } from "../data/spacing";
import { SimpleTable } from "../components/simple-table/SimpleTable";
import { formatJustDate, formatJustTime } from "../utils/formatTime";
import { Box } from "@mui/system";

const AvicultureHallInspects = () => {
  const { avicultureHallInspects } = useSelector(
    (state) => state.avicultureSlice
  );

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const { key } = useParams();
  const { hall } = useParams();

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(avicultureGetHallInspects(key + "&hall=" + hall)).then(() => {
      dispatch(LOADING_END());
    });
  }, []);

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
          <Grid xs={12}>
            <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,
                }}
              >
                {avicultureHallInspects?.map((item) => {
                  return (
                    <TimelineItem
                      key={item.id}
                      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((imageUrl) => {
                                        return [
                                          <Grid
                                            display="inline-flex"
                                            key={imageUrl}
                                          >
                                            <a href={imageUrl} alt="دانلود">
                                              <img
                                                src={imageUrl}
                                                width="80"
                                                height="80"
                                                alt="دانلود"
                                                style={{
                                                  marginRight: "10px",
                                                  borderRadius: "5px",
                                                }}
                                              />
                                            </a>
                                          </Grid>,
                                        ];
                                      })
                                    : "بدون پیوست",
                                ],
                              ]}
                            />
                          </Grid>
                        </Grid>
                      </Grid>
                    </TimelineItem>
                  );
                })}
                {!avicultureHallInspects?.length && (
                  <Typography variant="body1" component="span">
                    برای این سالن بازرسی ثبت نشده است.
                  </Typography>
                )}
              </Timeline>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};

export default AvicultureHallInspects;
