import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";

import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { stewardGetBarsInfo } from "../../services/steward-get-bars-info";
import { Grid } from "../../../../components/grid/Grid";
import { StewardShowProducts } from "../steward-show-products/StewardShowProducts";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { StewardShowAllocations } from "../steward-show-allocations/StewardShowAllocations";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const StewardStock = () => {
  const dispatch = useDispatch();
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const [barsInfo, setBarsInfo] = useState([]);
  const notEnteredRef = useRef();
  const enteredRef = useRef();

  const handleUpdate = () => {
    dispatch(
      stewardGetBarsInfo({
        role_key: checkPathStartsWith("steward") ? selectedSubUser?.key : "",
      })
    ).then((r) => {
      setBarsInfo(r.payload.data);
    });

    if (notEnteredRef.current) {
      notEnteredRef.current.updateTable();
    }
    if (enteredRef.current) {
      enteredRef.current.updateTable();
    }
  };

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

  return (
    <Grid container xs={12} justifyContent="end" alignItems="center">
      <Grid container width="100%" isDashboard>
        <StewardShowProducts />
      </Grid>

      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mt={2}
      >
        <Grid container justifyContent="start" alignItems="center" xs={12}>
          <ResponsiveTable
            title="اطلاعات کلی بارها"
            noPagination
            data={[
              [
                barsInfo?.totalBars?.toLocaleString(),
                barsInfo?.totalBarsWeight?.toLocaleString(),
                barsInfo?.totalEnteredBars?.toLocaleString(),
                barsInfo?.totalEnteredBarsWeight?.toLocaleString(),
                barsInfo?.totalNotEnteredBars?.toLocaleString(),
                barsInfo?.totalNotEnteredKillHouseRequestsWeight?.toLocaleString(),
                barsInfo?.totalRejectedBars?.toLocaleString(),
                barsInfo?.totalRejectedBarsWeight?.toLocaleString(),
              ],
            ]}
            columns={[
              "تعداد کل بارها",
              "وزن کل بارها (کیلوگرم)",
              "تعداد کل بارهای وارد شده",
              "وزن کل بار وارد شده (کیلوگرم)",
              "تعداد کل بارهای وارد نشده",
              "وزن کل بار وارد نشده (کیلوگرم)",
              "تعداد کل بارهای رد شده",
              "وزن کل بارهای رد شده",
            ]}
            allColors={{ color: "#f3bda3", text: "#332a3d" }}
          />
        </Grid>

        <Grid container xs={12} mt={4}>
          <StewardShowAllocations
            ref={notEnteredRef}
            type="not_entered"
            handleUpdate={handleUpdate}
          />
        </Grid>

        <Accordion sx={{ width: "100%", mt: 4 }}>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>بارهای وارد شده</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Grid container xs={12}>
              <StewardShowAllocations
                ref={enteredRef}
                type="entered"
                handleUpdate={handleUpdate}
              />
            </Grid>
          </AccordionDetails>
        </Accordion>
      </Grid>
    </Grid>
  );
};
