import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { Tab, Tabs } from "@mui/material";
import { ProvinceColdHousesKillHouses } from "../province-cold-houses-killhouses/ProvinceColdHousesKillHouses";
import { ProvinceColdHousesStewards } from "../province-cold-houses-stewards/ProvinceColdHousesStewards";
import { useDispatch } from "react-redux";
import { provinceGetColdHousesDashboard } from "../../services/province-cold-houses";

export const ProvinceColdHousesList = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const [dashboardData, setDashboardData] = useState([]);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(provinceGetColdHousesDashboard()).then((r) => {
      setDashboardData(r.payload.data);
    });
  }, [dispatch]);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center" gap={2}>
      <ResponsiveTable
        isDashboard
        noPagination
        columns={[
          "تعداد کل سردخانه ها",
          "تعداد کل سردخانه های کشتارگاه ها",
          "تعداد کل سردخانه های مباشرین",
          "کل وزن وارد شده",
          "کل وزن خارج شده",
          "کل وزن باقیمانده",
        ]}
        data={[
          [
            dashboardData?.totalColdHouses?.toLocaleString(),
            dashboardData?.totalKillHouseColdHouse?.toLocaleString(),
            dashboardData?.totalStewardColdHouse?.toLocaleString(),
            dashboardData?.totalInputWeight?.toLocaleString(),
            dashboardData?.totalAllocatedWeight?.toLocaleString(),
            dashboardData?.totalRemainWeight?.toLocaleString(),
          ],
        ]}
        title={"خلاصه اطلاعات"}
      />

      <Grid
        xs={12}
        container
        alignItems="center"
        justifyContent="center"
        mt={2}
      >
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={value}
          onChange={handleChange}
        >
          <Tab label="سردخانه های کشتارگاه ها" value={0} />
          <Tab label="سردخانه های مباشرین" value={1} />
        </Tabs>
      </Grid>

      {value === 0 && <ProvinceColdHousesKillHouses />}
      {value === 1 && <ProvinceColdHousesStewards />}
    </Grid>
  );
};
