import { DatePicker } from "@mui/x-date-pickers";
import { Button, TextField, Tooltip } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import moment from "moment";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { RiFileExcel2Fill } from "react-icons/ri";
import { AppContext } from "../../../../contexts/AppContext";
import { totalReportDailyStewardBroadCastService } from "../../../slaughter-house/services/total-report-daily-steward-broadcast";
import { getProvinceStewardAllocationsService } from "../../services/get-province-steward.allocation";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";

export const ProvinceGuildAllocation = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  // const navigate = useNavigate();
  const dispatch = useDispatch();
  const [dataTable, setDataTable] = useState([]);
  const { getProvinceStewardAllocations, totalReportStewardDailyBroadCast } =
    useSelector((state) => state.provinceSlice);

  useEffect(() => {
    dispatch(
      getProvinceStewardAllocationsService({ selectedDate1, selectedDate2 })
    );
    dispatch(
      totalReportDailyStewardBroadCastService({
        selectedDate1,
        selectedDate2,
      })
    );
  }, [selectedDate1, selectedDate2]);

  useEffect(() => {
    dispatch(
      getProvinceStewardAllocationsService({ selectedDate1, selectedDate2 })
    );
    dispatch(
      totalReportDailyStewardBroadCastService({
        selectedDate1,
        selectedDate2,
      })
    );
  }, []);

  useEffect(() => {
    const d = getProvinceStewardAllocations?.map((item, i) => {
      return [
        i + 1,
        item?.informations?.buyers,
        item?.informations?.city,
        item?.informations?.totalFreeWeightOfCarcasses?.toLocaleString(),
        item?.informations?.totalNumberOfFreeCarcasses?.toLocaleString(),
        item?.informations?.totalWeightOfCarcasses?.toLocaleString(),
        item?.informations?.totalNumberOfCarcasses?.toLocaleString(),
        item?.informations?.finalTotalWeightOfCarcasses?.toLocaleString(),
        item?.informations?.finalTotalNumberOfCarcasses?.toLocaleString(),
        item?.informations?.totalAllocatedWeight?.toLocaleString(),
        item?.informations?.totalAllocatedQuantity?.toLocaleString(),
        item?.informations?.totalAcceptedAllocatedWeight?.toLocaleString(),
        item?.informations?.totalAcceptedAllocatedQuantity?.toLocaleString(),
        item?.informations?.totalRemainQuantity?.toLocaleString(),
        item?.informations?.totalRemainWeight?.toLocaleString(),
        <Tooltip key={i} title="خروجی اکسل">
          <a
            href={`${axios.defaults.baseURL}steward_ware_house_total_report_daily_detail_excel/?date1=${selectedDate1}&date2=${selectedDate2}&key=${item?.key}`}
            rel="noreferrer"
          >
            <Button color="success">
              <RiFileExcel2Fill size={24} />
            </Button>
          </a>
        </Tooltip>,
      ];
    });
    setDataTable(d);
  }, [getProvinceStewardAllocations]);

  return (
    <Grid>
      <Grid
        container
        alignItems="center"
        justifyContent="start"
        gap={SPACING.SMALL}
        mt={SPACING.TINY}
        mb={SPACING.SMALL}
      >
        <Grid style={{ width: 160 }}>
          <DatePicker
            label="از تاریخ"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid style={{ width: 160 }}>
          <DatePicker
            label="تا تاریخ"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>

        <Tooltip title="خروجی اکسل">
          <a
            href={
              dataTable?.length
                ? `${axios.defaults.baseURL}steward_ware_house_total_report_daily_excel/?date1=${selectedDate1}&date2=${selectedDate2}`
                : "#"
            }
            rel="noreferrer"
          >
            <Button disabled={!dataTable?.length} color="success">
              <RiFileExcel2Fill size={32} />
            </Button>
          </a>
        </Tooltip>
      </Grid>
      <Grid isDashboard mb={SPACING.SMALL}>
        <ResponsiveTable
          title={"خلاصه اطلاعات"}
          noPagination
          isDashboard
          columns={[
            "تعداد خریداران",
            "وزن خرید خارج از استان",
            "تعداد خرید خارج از استان",
            "وزن بارهای امروز",
            "تعداد بارهای امروز",
            "وزن کل انبار",
            "تعداد کل انبار",
            "وزن توزیع شده",
            "تعداد توزیع شده",
            "وزن توزیع تحویل شده",
            "تعداد توزیع تحویل شده",
            "وزن مانده در انبار",
            "تعداد مانده در انبار",
            "تعداد صنف تخصیصی",
          ]}
          data={[
            [
              totalReportStewardDailyBroadCast?.buyers?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalFreeWeightOfCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalNumberOfFreeCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalWeightOfCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalNumberOfCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.finalTotalWeightOfCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.finalTotalNumberOfCarcasses?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalAllocatedWeight?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalAllocatedQuantity?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalAcceptedAllocatedWeight?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalAcceptedAllocatedQuantity?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalRemainQuantity?.toLocaleString(),
              totalReportStewardDailyBroadCast?.totalRemainWeight?.toLocaleString(),
              totalReportStewardDailyBroadCast?.numberOfGuild.toLocaleString(),
            ],
          ]}
        />
      </Grid>
      <Grid
        container
        alignItems="center"
        justifyContent="start"
        gap={SPACING.SMALL}
        mt={SPACING.MEDIUM}
      ></Grid>
      <ResponsiveTable
        title="جزئیات پخش"
        paginated
        columns={[
          "ردیف",
          "خریدار",
          "شهرستان",
          "وزن خرید خارج از استان",
          "تعداد خرید خارج از استان",
          "وزن بارهای امروز",
          "تعداد بارهای امروز",
          "وزن کل انبار",
          "تعداد کل انبار",
          "وزن توزیع شده",
          "تعداد توزیع شده",
          "وزن توزیع تحویل شده",
          "تعداد توزیع تحویل شده",
          "وزن مانده در انبار",
          "تعداد مانده در انبار",
          "جزئیات",
        ]}
        data={dataTable}
      />
    </Grid>
  );
};
