import React, { useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { getKillhouseApprovedPriceState } from "../../../province/services/get-approved-price-state";
import { Grid } from "../../../../components/grid/Grid";
import { StewardShowProducts } from "../steward-show-products/StewardShowProducts";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { StewardAllocationToGuild } from "../../../guild/components/StewardAllocationToGuild";
import { ROUTE_STEWARD_DAILY_LIST } from "../../../../routes/routes";
import { StewardShowAllocations } from "../steward-show-allocations/StewardShowAllocations";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const StewardSellInProvince = () => {
  const dispatch = useDispatch();
  const allocationsRef = useRef(null);
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const { stewardProducts } = useSelector((state) => state.stewardSlice);

  const navigate = useNavigate();

  const { priceInfo } = useSelector((state) => state.slaughterSlice);

  const fetchData = useCallback(async () => {
    dispatch(
      getKillhouseApprovedPriceState({
        role_key: checkPathStartsWith("steward")
          ? selectedSubUser?.key || ""
          : "",
      })
    );

    if (allocationsRef.current?.updateTable) {
      allocationsRef.current.updateTable();
    }
  }, [dispatch, selectedSubUser?.key]);

  useEffect(() => {
    fetchData();
  }, [selectedSubUser?.key]);

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

      <Grid container xs={12} my={2} gap={2}>
        <Button
          disabled={
            !stewardProducts ||
            !Array.isArray(stewardProducts) ||
            stewardProducts.length === 0
          }
          variant="contained"
          onClick={() => {
            dispatch(
              DRAWER({
                right: !(window.innerWidth <= 600),
                bottom: window.innerWidth <= 600,
                title: "ثبت توزیع/ فروش درون استان",
                size: {
                  xs: "100%",
                  md: "360px",
                },
                content: (
                  <StewardAllocationToGuild
                    fetchData={fetchData}
                    sellerType={"Steward"}
                    sellType="exclusive"
                    priceInfo={priceInfo}
                  />
                ),
              })
            );
          }}
        >
          ثبت توزیع/ فروش
        </Button>

        <Button
          disabled
          variant="contained"
          color="success"
          onClick={() => {
            navigate(ROUTE_STEWARD_DAILY_LIST);
          }}
        >
          لیست روزانه
        </Button>
      </Grid>

      <Grid container xs={12} mt={4}>
        <StewardShowAllocations
          ref={allocationsRef}
          handleUpdate={fetchData}
          priceInfo={priceInfo}
          remainWeight={
            stewardProducts?.[0]?.totalRemainWeight !== undefined
              ? stewardProducts[0].totalRemainWeight
              : undefined
          }
        />
      </Grid>
    </Grid>
  );
};