import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Checkbox, Tab, Tabs, TextField } from "@mui/material";
import { ProvinceSubSectorVetFarmSharesOverview } from "../province-sub-sector-vet-farm-shares-overview/ProvinceSubSectorVetFarmSharesOverview";
import { provinceSubSectorVetFarmSharesOverviewDashboard } from "../../services/province-sub-sectors-services";
import { useDispatch } from "react-redux";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { ProvinceSubSectorVetFarmSharesDeposits } from "../province-sub-sector-vet-farm-shares-deposits/ProvinceSubSectorVetFarmSharesDeposits";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import ToggleOffOutlinedIcon from "@mui/icons-material/ToggleOffOutlined";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
import { AppContext } from "../../../../contexts/AppContext";

export const ProvinceSubSectorVetFarmShares = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const [selectedTab, setSelectedTab] = useState(0);
  const [dashboardData, setDashboardData] = useState([]);
  const [withDate, setWithDate] = useState(false);
  const dispatch = useDispatch();
  useEffect(() => {
    const currentDate = moment(new Date()).format("YYYY-MM-DD");
    setSelectedDate1(currentDate);
    setSelectedDate2(currentDate);
  }, []);
  const handleTabChange = (event, newValue) => {
    setSelectedTab(newValue);
  };

  const getParams = () => {
    return {
      date1: withDate ? selectedDate1 : null,
      date2: withDate ? selectedDate2 : null,
    };
  };

  useEffect(() => {
    dispatch(provinceSubSectorVetFarmSharesOverviewDashboard(getParams())).then(
      (r) => {
        setDashboardData(r.payload.data);
      }
    );
  }, [dispatch, selectedTab, selectedDate1, selectedDate2, withDate]);

  return (
    <Grid
      container
      xs={12}
      justifyContent="center"
      alignItems="center"
      px={{
        xs: 2,
        md: 0,
      }}
    >
      <Grid
        container
        gap={1}
        style={{
          borderStyle: "solid",
          borderWidth: "1px",
          padding: "5px",
          borderRadius: "15px",
          borderColor: "gray",
          justifyContent: "left",
        }}
        alignItems="center"
      >
        <Checkbox
          icon={<ToggleOffOutlinedIcon />}
          checkedIcon={<ToggleOnIcon />}
          checked={withDate}
          onChange={() => setWithDate(!withDate)}
          color="primary"
          size="large"
        />
        <Grid>
          <DatePicker
            disabled={!withDate}
            label="از تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField
                size="small"
                sx={{ width: { xs: "126px", md: "160px" } }}
                {...params}
              />
            )}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid>
          <DatePicker
            disabled={!withDate}
            label="تا تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField
                size="small"
                sx={{ width: { xs: "126px", md: "160px" } }}
                {...params}
              />
            )}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
      </Grid>
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        mb={SPACING.MEDIUM}
        mt={SPACING.SMALL}
        xs={12}
      >
        <Grid
          container
          xs={12}
          justifyContent="center"
          alignItems="center"
          mb={2}
        >
          <ResponsiveTable
            columns={[
              "تعرفه کشتار و توزيع داخل استان",
              "تعرفه کشتار و توزيع خارج استان",
              "تعرفه فروش به خارج استان",
              "مجموع تعرفه",
              "واريزی اتحاديه",
              "مانده تعرفه",
            ]}
            data={[
              [
                Math.round(
                  dashboardData?.totalPureInternalProvinceCarcassesAmount
                )?.toLocaleString(),
                Math.round(
                  dashboardData?.totalPureExternalProvinceCarcassesAmount
                )?.toLocaleString(),
                Math.round(
                  dashboardData?.outProvincePoultryRequestAmount
                )?.toLocaleString(),
                Math.round(dashboardData?.totalWage)?.toLocaleString(),
                Math.round(dashboardData?.vetDepositAmount)?.toLocaleString(),
                Math.round(dashboardData?.totalRemainWage)?.toLocaleString(),
              ],
            ]}
            noPagination
            isDashboard
            title="خلاصه اطلاعات"
          />
        </Grid>

        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={selectedTab}
          onChange={handleTabChange}
        >
          <Tab label="اطلاعات کلی" />
          <Tab label="واریزی ها" />
        </Tabs>
      </Grid>

      {selectedTab === 0 && (
        <ProvinceSubSectorVetFarmSharesOverview getParams={getParams} />
      )}
      {selectedTab === 1 && <ProvinceSubSectorVetFarmSharesDeposits />}
    </Grid>
  );
};
