import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { useDispatch } from "react-redux";
import {
  provinceSubSectorCitySharesDepositssDashboard,
  provinceSubSectorCitySharesWageDetailsService,
} from "../../services/province-sub-sectors-services";
import { SPACING } from "../../../../data/spacing";
import { Tab, Tabs } from "@mui/material";
import { ProvinceSubSectorCitySharesDepositsDeposits } from "../province-sub-sector-city-shares-deposits-deposits/ProvinceSubSectorCitySharesDepositsDeposits";

export const ProvinceSubSectorCitySharesDeposits = () => {
  const dispatch = useDispatch();
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setSelectedTab(newValue);
  };
  const [tableData, setTableData] = useState([]);
  const [dashboardData, setDashboardData] = useState([]);

  useEffect(() => {
    dispatch(provinceSubSectorCitySharesDepositssDashboard()).then((r) => {
      setDashboardData(r.payload.data);
    });

    if (selectedTab === 0) {
      dispatch(provinceSubSectorCitySharesWageDetailsService()).then((r) => {
        const d = r.payload.data?.map((item, i) => {
          return [
            i + 1,
            item?.unitName,
            item?.user?.city,
            `${item?.user?.fullname} (${item?.user?.mobile})`,
            Math.round(
              item?.wageInfo?.outProvincePoultryRequestAmount
            )?.toLocaleString(),
            Math.round(
              item?.wageInfo?.totalPureInternalProvinceCarcassesAmount
            )?.toLocaleString(),
            Math.round(
              item?.wageInfo?.totalPureExternalProvinceCarcassesWeight
            )?.toLocaleString(),
            Math.round(item?.wageInfo?.totalWageAmount)?.toLocaleString(),
            Math.round(item?.wageInfo?.numberOfCityDeposit)?.toLocaleString(),
            Math.round(item?.wageInfo?.cityDeposit)?.toLocaleString(),
            Math.round(item?.wageInfo?.totalRemainWageAmount)?.toLocaleString(),
          ];
        });
        setTableData(d);
      });
    }
  }, [dispatch, selectedTab]);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mb={2}
      >
        <ResponsiveTable
          columns={[
            "تعرفه زنده خارج استان",
            "تعرفه کشتار و توزیع داخل استان",
            "تعرفه کشتار و توزیع خارج استان",
            "مجموع تعرفه",
            "واریزی اتحادیه",
            "مانده تعرفه",
          ]}
          data={[
            [
              Math.round(
                dashboardData?.cityOutProvincePoultryRequest
              )?.toLocaleString(),
              Math.round(
                dashboardData?.cityProvinceKillRequestWage
              )?.toLocaleString(),
              Math.round(
                dashboardData?.cityOutProvinceOutSellCarcassesWage
              )?.toLocaleString(),
              Math.round(dashboardData?.cityTotalWage)?.toLocaleString(),
              Math.round(dashboardData?.cityDeposit)?.toLocaleString(),
              Math.round(
                dashboardData?.cityTotalRemainWageAmount
              )?.toLocaleString(),
            ],
          ]}
          noPagination
          isDashboard
          title="خلاصه اطلاعات"
        />
      </Grid>

      <Grid
        container
        justifyContent="center"
        alignItems="center"
        mb={SPACING.MEDIUM}
        mt={SPACING.SMALL}
        xs={12}
      >
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={selectedTab}
          onChange={handleTabChange}
        >
          <Tab label="اطلاعات کلی" />
          <Tab label="واریزی ها" />
        </Tabs>
      </Grid>

      {selectedTab === 0 && (
        <ResponsiveTable
          columns={[
            "ردیف",
            "تعاونی",
            "شهر",
            "کاربر",
            "تعرفه زنده خارج استان",
            "تعرفه کشتار و توزیع داخل استان",
            "تعرفه کشتار و توزیع خارج استان",
            "مجموع تعرفه",
            "تعداد دفعات واریز",
            "مجموع واریزی اتحادیه",
            "مانده تعرفه",
          ]}
          data={tableData}
          title="اطلاعات کلی واریزی ها"
          paginated
        />
      )}

      {selectedTab === 1 && <ProvinceSubSectorCitySharesDepositsDeposits />}
    </Grid>
  );
};
