import { Box, IconButton } from "@mui/material";
import React, { useEffect, useState } from "react";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { useDispatch, useSelector } from "react-redux";
import { avicultureGetHallsInfo } from "../features/aviculture/services/aviculture-get-halls-info";
import { LOADING_END, LOADING_START } from "../lib/redux/slices/appSlice";
import { ROUTE_AVICULTURE_INSPECTS } from "../routes/routes";
import { useNavigate } from "react-router-dom";
import { format } from "date-fns-jalali";
import ResponsiveTable from "../components/responsive-table/ResponsiveTable";
import TaskAltIcon from "@mui/icons-material/TaskAlt";

const AvicultureHalls = () => {
  const dispatch = useDispatch();

  const { avicultureHallsInfo } = useSelector((state) => state.avicultureSlice);
  const [dataTable, setDataTable] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(avicultureGetHallsInfo()).then(() => {
      dispatch(LOADING_END());
    });
  }, []);

  useEffect(() => {
    const d = avicultureHallsInfo?.map((item) => {
      return [
        item.hall,
        item.hatchingState === "active" ? "دارد" : "ندارد",
        format(new Date(item?.hatchingDate), "yyyy/MM/dd"),
        item.inspections,
        <IconButton
          disabled={item.inspections === 0}
          key={1}
          aria-label="delete"
          color="primary"
          className="avicultureActiveRequestsBtn"
          onClick={() =>
            navigate(
              ROUTE_AVICULTURE_INSPECTS + item.poultryKey + "/" + item.hall
            )
          }
        >
          <TaskAltIcon />
        </IconButton>,
      ];
    });
    setDataTable(d);
  }, [avicultureHallsInfo]);

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid justifyContent="center" my={SPACING.MEDIUM}>
          <ResponsiveTable
            paginated
            title="لیست سالن ها"
            columns={[
              "شماره سالن",
              "جوجه ریزی فعال",
              "تاریخ آخرین جوجه ریزی",
              "تعداد بازرسی ها",
              "سوابق بازرسی",
            ]}
            data={dataTable}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

export default AvicultureHalls;
