import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";

import { Tab, Tabs } from "@mui/material";
import { SPACING } from "../../../../data/spacing";
import { SlaughterShowProducts } from "../slaughter-show-products/SlaughterShowProducts";
import { SlaughterInventoryInProvinceBars } from "../slaughter-inventory-in-province-bars/SlaughterInventoryInProvinceBars";
import { SlaughterInventoryFreeBuyBars } from "../slaughter-inventory-free-buy-bars/SlaughterInventoryFreeBuyBars";
import { slaughterGetBarsInfo } from "../../services/slaughter-get-distribution-info";
import { useDispatch } from "react-redux";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";
import { useSelector } from "react-redux";

export const SlaughterInventory = () => {
  const [value, setValue] = useState("0");
  const [barsInfo, setBarsInfo] = useState([]);
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(
      slaughterGetBarsInfo({
        role_key: checkPathStartsWith("slaughter")
          ? selectedSubUser?.key || ""
          : "",
      })
    ).then((r) => {
      setBarsInfo(r.payload.data);
    });
  }, [dispatch, selectedSubUser?.key]);

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

      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mt={2}
      >
        <Tabs
          value={value}
          onChange={handleChange}
          textColor="secondary"
          indicatorColor="secondary"
          aria-label="secondary tabs example"
        >
          <Tab value="0" label="بارهای داخل استان" />
          <Tab value="1" label="خریدهای خارج استان" />
        </Tabs>
      </Grid>

      {value === "0" && (
        <Grid container xs={12} justifyContent="center" alignItems="center">
          <Grid container justifyContent="start" alignItems="center" xs={12}>
            <ResponsiveTable
              title="اطلاعات کلی بارها"
              noPagination
              data={[
                [
                  barsInfo?.totalBars?.toLocaleString(),
                  barsInfo?.totalBarsQuantity?.toLocaleString(),
                  barsInfo?.totalBarsWeight?.toLocaleString(),
                  barsInfo?.totalEnteredBars?.toLocaleString(),
                  barsInfo?.totalEnteredBarsWeight?.toLocaleString(),
                  barsInfo?.totalEnteredBarsCarcasses?.toLocaleString(),
                  barsInfo?.totalEnteredBarsCarcassesWeight?.toLocaleString(),
                  barsInfo?.totalNotEnteredBars?.toLocaleString(),
                  barsInfo?.totalNotEnteredBarsQuantity?.toLocaleString(),
                  barsInfo?.totalNotEnteredKillHouseRequestsWeight?.toLocaleString(),
                ],
              ]}
              columns={[
                "تعداد کل بارها",
                "حجم کل بارها (قطعه)",
                "وزن کل بارها (کیلوگرم)",
                "تعداد کل بارهای وارد شده",
                "وزن کل بارهای وارد شده",
                "حجم کل لاشه وارد شده (قطعه)",
                "وزن کل لاشه وارد شده (کیلوگرم)",
                "تعداد کل بارهای وارد نشده",
                "حجم کل بار وارد نشده (قطعه)",
                "وزن کل بار وارد نشده (کیلوگرم)",
              ]}
              allColors={{ color: "#f3bda3", text: "#332a3d" }}
            />
            <Grid container mt={SPACING.MEDIUM} mb={SPACING.MEDIUM}>
              <SlaughterInventoryInProvinceBars type="notentered" />
            </Grid>

            <Grid container mt={SPACING.MEDIUM} mb={SPACING.MEDIUM}>
              <SlaughterInventoryInProvinceBars type="entered" />
            </Grid>
          </Grid>
        </Grid>
      )}

      {value === "1" && (
        <Grid container mt={SPACING.MEDIUM} mb={SPACING.MEDIUM}>
          <SlaughterInventoryFreeBuyBars />
        </Grid>
      )}
    </Grid>
  );
};
