import { Checkbox, Tab, Tabs, TextField } from "@mui/material";
import React, { useContext, useEffect, useState } from "react";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useDispatch } from "react-redux";
import { provinceSubSectorStewardSharesOverviewDashboard } from "../../services/province-sub-sectors-services";
import { ProvinceSubSectorStewardSharesOverview } from "../province-sub-sector-steward-shares-overview/ProvinceSubSectorStewardSharesOverview";
import { ProvinceSubSectorStewardSharesDeposits } from "../province-sub-sector-steward-shares-deposits/ProvinceSubSectorStewardSharesDeposits";
import { AppContext } from "../../../../contexts/AppContext";
import moment from "moment";
import { DatePicker } from "@mui/x-date-pickers";
import ToggleOffOutlinedIcon from "@mui/icons-material/ToggleOffOutlined";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
export const ProvinceSubSectorWageDeposits = () => {
  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(provinceSubSectorStewardSharesOverviewDashboard(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
        justifyContent="center"
        alignItems="center"
        mb={SPACING.MEDIUM}
        mt={SPACING.SMALL}
        xs={12}
      >
        <Grid
          container
          gap={1}
          style={{
            borderStyle: "solid",
            borderWidth: "1px",
            padding: "5px",
            borderRadius: "15px",
            borderColor: "gray",
            justifyContent: "left",
          }}
          alignItems="center"
          mb={{
            xs: 2,
            md: 0,
          }}
        >
          <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
          xs={12}
          justifyContent="center"
          alignItems="center"
          mb={2}
        >
          <ResponsiveTable
            columns={[
              "کل وزن دریافتی",
              "کل وزن فروش رفته",
              "مجموع تعرفه (ریال)",
              "واريزی اتحاديه (ریال)",
              "مانده تعرفه (ریال)",
            ]}
            data={[
              [
                Math.round(dashboardData?.buyWeight)?.toLocaleString(),
                Math.round(dashboardData?.sellWeight)?.toLocaleString(),
                Math.round(dashboardData?.totalWage)?.toLocaleString(),
                Math.round(dashboardData?.guildDeposit)?.toLocaleString(),
                Math.round(dashboardData?.remainWage)?.toLocaleString(),
              ],
            ]}
            noPagination
            isDashboard
            title="خلاصه اطلاعات"
          />
        </Grid>

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

      {selectedTab === 0 && (
        <ProvinceSubSectorStewardSharesOverview getParams={getParams} />
      )}
      {selectedTab === 1 && <ProvinceSubSectorStewardSharesDeposits />}
    </Grid>
  );
};
