import { Box, Tab, Tabs } from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchStewardBroadcastAndProducts } from "../../services/handle-fetch-steward-products";
import { SPACING } from "../../../../data/spacing";
import { StewardShowProducts } from "../steward-show-products/StewardShowProducts";
import { Grid } from "../../../../components/grid/Grid";
import { StewardSellOutOfProvinceSells } from "../steward-sell-out-of-province-sells/StewardSellOutOfProvinceSells";
import { StewardSellOutOfProvinceBuyers } from "../steward-sell-out-of-province-buyers/StewardSellOutOfProvinceBuyers";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const StewardSellOutOfProvince = () => {
  const dispatch = useDispatch();
  const [valueOutProvince, setValueOutProvince] = useState(0);

  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const handleChangeTabsetOutProvince = (event, newValue) => {
    setValueOutProvince(newValue);
  };

  useEffect(() => {
    dispatch(
      fetchStewardBroadcastAndProducts({
        role_key: checkPathStartsWith("steward") ? selectedSubUser?.key : "",
      })
    );
  }, [selectedSubUser?.key]);

  return (
    <Grid
      container
      direction="column"
      alignItems="center"
      justifyContent="space-between"
      gap={SPACING.SMALL}
      mt={SPACING.MEDIUM}
      width="100%"
    >
      <Grid container width="100%" isDashboard>
        <StewardShowProducts />
      </Grid>

      <Grid
        container
        direction="column"
        alignItems="center"
        justifyContent="space-between"
        gap={SPACING.SMALL}
        mb={SPACING.SMALL}
        width="100%"
      >
        <Box
          sx={{
            borderBottom: 1,
            borderColor: "divider",
          }}
        >
          <Tabs
            className="insidetabs"
            size="small"
            value={valueOutProvince}
            onChange={handleChangeTabsetOutProvince}
            aria-label="basic tabs example"
          >
            <Tab label="فروش" />
            <Tab label="خریداران" />
          </Tabs>
        </Box>

        {valueOutProvince === 0 && <StewardSellOutOfProvinceSells />}

        {valueOutProvince === 1 && <StewardSellOutOfProvinceBuyers />}
      </Grid>
    </Grid>
  );
};