import React, { useEffect, useState } from "react";
import { Grid } from "../components/grid/Grid";
import { Box, IconButton } from "@mui/material";
import ResponsiveTable from "../components/responsive-table/ResponsiveTable";
import { useDispatch, useSelector } from "react-redux";
import {
  slaughterGetMorgueDashboardService,
  slaughterGetMorguesService,
} from "../features/slaughter-house/services/slaughetr-morgue-services";
import { useNavigate, useParams } from "react-router-dom";
import { SlaughterMorgueView } from "../features/slaughter-house/components/slaughter-morgue-view/SlaughterMorgueView";
import { ROUTE_SLAUGHTER_MORGUE } from "../routes/routes";
import { BackButton } from "../components/back-button/BackButton";
import VisibilityIcon from "@mui/icons-material/Visibility";
import { checkPathStartsWith } from "../utils/checkPathStartsWith";

const SlaughterMorgue = () => {
  const dispatch = useDispatch();
  const [dashboardData, setDashboardData] = useState([]);
  const [tableData, setTableData] = useState([]);
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const navigate = useNavigate();

  const { key } = useParams();

  useEffect(() => {
    if (!key) {
      dispatch(
        slaughterGetMorgueDashboardService({
          role_key: checkPathStartsWith("slaughter")
            ? selectedSubUser?.key || ""
            : "",
        })
      ).then((r) => {
        setDashboardData(r.payload.data);
      });
      dispatch(slaughterGetMorguesService()).then((r) => {
        const d = r.payload.data?.coldHouses?.map((item, i) => {
          return [
            i + 1,
            item?.name,
            item?.totalInputWeight?.toLocaleString(),
            item?.totalAllocatedWeight?.toLocaleString(),
            item?.totalRemainWeight?.toLocaleString(),
            <IconButton
              key={i}
              color="success"
              onClick={() => {
                navigate(ROUTE_SLAUGHTER_MORGUE + "/" + item?.key);
              }}
            >
              <VisibilityIcon />
            </IconButton>,
          ];
        });
        setTableData(d);
      });
    }
  }, [dispatch, key, selectedSubUser?.key]);

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <BackButton />
          {!key ? (
            <Grid container justifyContent="space-between" alignItems="center">
              <Grid container mb={4} isDashboard xs={12}>
                <ResponsiveTable
                  noPagination
                  isDashboard
                  columns={[
                    "تعداد سردخانه ها",
                    "وزن تخصیص داده شده",
                    "کل وزن وارد شده",
                    "وزن باقیمانده",
                  ]}
                  data={[
                    [
                      dashboardData?.totalColdHouses?.toLocaleString(),
                      dashboardData?.totalAllocatedWeight?.toLocaleString(),
                      dashboardData?.totalInputWeight?.toLocaleString(),
                      dashboardData?.totalRemainWeight?.toLocaleString(),
                    ],
                  ]}
                  title={"خلاصه اطلاعات"}
                />
              </Grid>
              <Grid
                container
                xs={12}
                justifyContent="center"
                alignItems="cented"
              >
                <ResponsiveTable
                  title="سردخانه ها"
                  paginated
                  columns={[
                    "ردیف",
                    "نام سردخانه",
                    "وزن وارد شده",
                    "وزن خارج شده",
                    "وزن باقیمانده",
                    "نمایش",
                  ]}
                  data={tableData}
                />
              </Grid>
            </Grid>
          ) : (
            <Grid container justifyContent="start" alignItems="center" xs={12}>
              <SlaughterMorgueView />
            </Grid>
          )}
        </Grid>
      </Box>
    </>
  );
};

export default SlaughterMorgue;
