import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import moment from "moment";
import { DatePicker } from "@mui/x-date-pickers";
import { Button, Checkbox, Tab, Tabs, TextField, Tooltip } from "@mui/material";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { useDispatch } from "react-redux";
import {
  provinceGetDispenserKillhousesDashboardService,
  provinceGetDispenserKillhousesService,
} from "../../services/province-get-dispenser-killhouses";
import { AppContext } from "../../../../contexts/AppContext";
import { RiFileExcel2Fill } from "react-icons/ri";
import axios from "axios";
import ToggleOffOutlinedIcon from "@mui/icons-material/ToggleOffOutlined";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
import { SPACING } from "../../../../data/spacing";
import { ProvinceDispenserSaleWithInProvince } from "../province-dispenser-sale-with-in-province/ProvinceDispenserSaleWithInProvince";
import { ProvinceDispenserSaleOutProvince } from "../province-dispenser-sale-out-province/ProvinceDispenserSaleInProvince";
import { ProvinceSegmentation } from "../province-segmentation/ProvinceSegmentation";
import { ProvinceColdHouses } from "../province-cold-houses/ProvinceColdHouses";

export const ProvinceDispensersKillhouses = () => {
  const [tableData, setTableData] = useState([]);
  const [withDate, setWithDate] = useState(false);
  const [dashboardData, setDashboardData] = useState([]);
  const [openNotif] = useContext(AppContext);
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const dispatch = useDispatch();

  const fetchDashboardData = () => {
    if (value === 0) {
      dispatch(
        provinceGetDispenserKillhousesDashboardService({
          selectedDate1: withDate ? selectedDate1 : null,
          selectedDate2: withDate ? selectedDate2 : null,
        })
      ).then((r) => {
        setDashboardData(r.payload.data);
      });
    }
  };

  const fetchTableData = () => {
    if (value === 0) {
      dispatch(
        provinceGetDispenserKillhousesService(
          withDate ? { selectedDate1, selectedDate2 } : {}
        )
      ).then((r) => {
        const d = r.payload?.data?.map((item, i) => {
          return [
            i + 1,
            `${item?.killHouseOperator?.user?.fullname} (${item?.killHouseOperator?.user?.mobile})`,
            `${item?.killer ? "کشتارکن" : "کشتارگاه"} (${item?.name})`,
            item?.killHouseOperator?.user?.city?.name,
            item?.wareHouseInfo?.productRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalGovernmentalRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalFreeRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalEnteredCarcassesWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalSell?.toLocaleString(),
            // item?.wareHouseInfo?.provinceKillRequestsQuantity?.toLocaleString(),
            // item?.wareHouseInfo?.totalProvinceBars?.toLocaleString(),
            // item?.wareHouseInfo?.totalProvinceBarsQuantity?.toLocaleString(),
            // item?.wareHouseInfo?.totalProvinceBarsWeight?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeBar?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeLiveBarQuantity?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeLiveBarWeight?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeCarcassesBar?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeBarCarcasses?.toLocaleString(),
            // item?.wareHouseInfo?.totalKillHouseFreeBarCarcassesWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalBars?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalQuantity?.toLocaleString(),
            Math.floor(
              item?.wareHouseInfo?.warehouseTotalWeight
            )?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalEnteredBars?.toLocaleString(),
            item?.wareHouseInfo?.totalGovernmentalInputWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalFreeInputWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalKillHouseAllocationsWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalKillHouseFreeSale_barCarcassesWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalKillHouseSegmentationsWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalKillHouseColdHouseAllocationsWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalGovernmentalOutputWeight?.toLocaleString(),
            item?.wareHouseInfo?.totalFreeOutputWeight?.toLocaleString(),
            item?.wareHouseInfo?.lastTotalRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.lastTotalGovernmentalRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.lastTotalFreeRemainWeight?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalNotEnteredBars?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalNotEnteredBarsQuantity?.toLocaleString(),
            item?.wareHouseInfo?.warehouseTotalNotEnteredBarsWeight?.toLocaleString(),
            <Tooltip title="خروجی اکسل" key={i}>
              <Button
                color="success"
                size="small"
                onClick={() => {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                    severity: "success",
                  });
                  const link = `${
                    axios.defaults.baseURL
                  }kill_house_inventory_data/?&role=KillHouse&key=${
                    item?.killHouseOperator?.user?.key
                  }${
                    withDate
                      ? `&date1=${selectedDate1}&date2=${selectedDate2}`
                      : ``
                  }`;
                  window.location.href = link;
                }}
              >
                <RiFileExcel2Fill size={24} />
              </Button>
            </Tooltip>,
          ];
        });
        setTableData(d);
      });
    }
  };

  const [selectedDate1, setSelectedDate1] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );
  const [selectedDate2, setSelectedDate2] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );

  useEffect(() => {
    fetchDashboardData();
    fetchTableData();
  }, [selectedDate1, selectedDate2, withDate, value]);

  return (
    <Grid container xs={12} justifyContent="start" alignItems="center">
      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mt={2}
      >
        <Grid
          container
          justifyContent="center"
          alignItems="center"
          mb={SPACING.MEDIUM}
          xs={12}
        >
          <Tabs
            scrollButtons="auto"
            variant="scrollable"
            allowScrollButtonsMobile
            onChange={handleChange}
            value={value}
          >
            <Tab label="اطلاعات جامع" />
            <Tab label="توزیع  به داخل استان" />
            <Tab label="فروش به خارج استان" />
            <Tab label="قطعه بندی" />
            <Tab label="سردخانه" />
          </Tabs>
        </Grid>
      </Grid>

      {value === 0 && (
        <>
          <ResponsiveTable
            title="اطلاعات کلی انبار"
            noPagination
            columns={[
              "حجم بار زنده (قطعه)",
              "وزن بار زنده (کیلوگرم)",
              "لاشه ورودی به انبار (کیلوگرم)",
              "لاشه دولتی (کیلوگرم)",
              "لاشه آزاد (کیلوگرم)",
              "لاشه توزیع شده داخل استان (کیلوگرم)",
              "لاشه توزیع شده خارج استان (کیلوگرم)",
              "وزن قطعه بندی (کیلوگرم)",
              "وزن انجماد (کیلوگرم)",
              "کل وزن دولتی فروش رفته",
              "کل وزن آزاد فروش رفته",
              "مانده دولتی (کیلوگرم)",
              "مانده آزاد (کیلوگرم)",
              "مانده انبار (کیلوگرم)",
              // "انبار گذشته",
              // "انبار دولتی گذشته",
              // "انبار آزاد گذشته",
            ]}
            data={[
              [
                dashboardData?.warehouseTotalQuantity?.toLocaleString(),
                dashboardData?.warehouseTotalWeight?.toLocaleString(),
                dashboardData?.warehouseTotalEnteredCarcassesWeight?.toLocaleString(),
                dashboardData?.totalGovernmentalInputWeight?.toLocaleString(),
                dashboardData?.totalFreeInputWeight?.toLocaleString(),
                dashboardData?.totalKillHouseAllocationsWeight?.toLocaleString(),
                dashboardData?.totalKillHouseFreeSaleBarCarcassesWeight?.toLocaleString(),
                dashboardData?.segmentationsWeight?.toLocaleString(),
                dashboardData?.coldHouseAllocationsWeight?.toLocaleString(),
                dashboardData?.totalGovernmentalOutputWeight?.toLocaleString(),
                dashboardData?.totalFreeOutputWeight?.toLocaleString(),
                dashboardData?.totalGovernmentalRemainWeight?.toLocaleString(),
                dashboardData?.totalFreeRemainWeight?.toLocaleString(),
                dashboardData?.productRemainWeight?.toLocaleString(),
                // dashboardData?.lastTotalRemainWeight?.toLocaleString(),
                // dashboardData?.lastTotalGovernmentalRemainWeight?.toLocaleString(),
                // dashboardData?.lastTotalFreeRemainWeight?.toLocaleString(),
              ],
            ]}
          />
          <Grid
            container
            mt={2}
            style={{
              borderStyle: "solid",
              borderWidth: "1px",
              padding: "10px",
              borderRadius: "15px",
              borderColor: "gray",
            }}
            gap={1}
          >
            <Grid container justifyContent="center" alignItems="center">
              <Checkbox
                icon={<ToggleOffOutlinedIcon />}
                checkedIcon={<ToggleOnIcon />}
                checked={withDate}
                onChange={() => setWithDate(!withDate)}
                color="primary"
                size="large"
              />
            </Grid>
            <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>

          <Tooltip title="خروجی اکسل">
            <Button
              color="success"
              onClick={() => {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                  severity: "success",
                });
                const link = `${
                  axios.defaults.baseURL
                }all_kill_house_inventory_data/?${
                  withDate
                    ? `date1=${selectedDate1}&date2=${selectedDate2}`
                    : ``
                }`;
                window.location.href = link;
              }}
            >
              <RiFileExcel2Fill size={32} />
            </Button>
          </Tooltip>

          <Tooltip title="توزیع کامل استان">
            <Button
              color="error"
              onClick={() => {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                  severity: "success",
                });
                const link = `${
                  axios.defaults.baseURL
                }all_distribution_province/?${
                  withDate
                    ? `date1=${selectedDate1}&date2=${selectedDate2}`
                    : ``
                }`;
                window.location.href = link;
              }}
            >
              <RiFileExcel2Fill size={32} />
            </Button>
          </Tooltip>

          <Grid
            container
            xs={12}
            justifyContent="center"
            alignItems="center"
            mt={2}
          >
            <ResponsiveTable
              title="انبار و توزیع"
              paginated
              columns={[
                "ردیف",
                "خریدار",
                "ماهیت",
                "شهر",
                "مانده انبار فعلی",
                "مانده دولتی",
                "مانده آزاد",
                "کل وزن ورودی به انبار(لاشه)",
                "وزن فروش رفته (لاشه)",
                // "تخصیصات بدون ماشین (قطعه)",
                // "تعداد بار استان (زنده)",
                // "قطعه بار استان (زنده)",
                // "وزن بار استان (زنده)",
                // "تعداد بار خارج استان(زنده)",
                // "حجم خرید خارج از استان (زنده)",
                // "وزن  خرید خارج استان(زنده)",
                // "بار خرید خارج استان (لاشه)",
                // "قطعه خرید خارج استان(لاشه)",
                // "وزن خرید خارج استان (لاشه)",
                "تعداد کل بارها",
                "حجم کل بارها(قطعه)",
                "وزن کل بارها",
                "بارهای ورودی به انبار",
                "وزن دولتی ورود به انبار",
                "وزن آزاد ورود به انبار",
                "وزن فروش به داخل",
                "وزن فروش به خارج",
                "وزن قطعه بندی",
                "وزن انجماد",
                "وزن فروش دولتی",
                "وزن فروش آزاد",
                "انبار گذشته",
                "انبار دولتی گذشته",
                "انبار آزاد گذشته",
                "بارهای وارد نشده به انبار(زنده)",
                "حجم وارد نشده به انبار(زنده)",
                "وزن وارد نشده به انبار(زنده)",
                "خروجی اکسل",
              ]}
              data={tableData}
            />
          </Grid>
        </>
      )}

      {value === 1 && <ProvinceDispenserSaleWithInProvince />}

      {value === 2 && <ProvinceDispenserSaleOutProvince />}

      {value === 3 && <ProvinceSegmentation />}

      {value === 4 && <ProvinceColdHouses />}
    </Grid>
  );
};
