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 { totalReportDailyBroadCastService } from "../../../slaughter-house/services/salughter-total-report-daily-broad-cast";
import { getProvinceBuyersAllocationsService } from "../../services/get-province-buyers-allocations";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";

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

  useEffect(() => {
    dispatch(
      getProvinceBuyersAllocationsService({ selectedDate1, selectedDate2 })
    );
    dispatch(
      totalReportDailyBroadCastService({
        selectedDate1,
        selectedDate2,
      })
    );
  }, [selectedDate1, selectedDate2]);

  useEffect(() => {
    dispatch(
      getProvinceBuyersAllocationsService({ selectedDate1, selectedDate2 })
    );
    dispatch(
      totalReportDailyBroadCastService({
        selectedDate1,
        selectedDate2,
      })
    );
  }, []);

  useEffect(() => {
    const d = getProvinceBuyersAllocations?.map((item, i) => {
      return [
        i + 1,
        item?.informations?.buyers,
        item?.informations?.city,
        item?.informations?.numberOfSteward.toLocaleString(),
        item?.informations?.numberOfGuild.toLocaleString(),
        item?.informations?.incomingWeightOfColdHouse?.toLocaleString(),
        item?.informations?.incomingQuantityOfColdHouse?.toLocaleString(),
        item?.informations?.totalPreColdWeight?.toLocaleString(),
        item?.informations?.totalPreColdQuantity?.toLocaleString(),
        item?.informations?.totalNumberOfFreeCarcasses?.toLocaleString(),
        item?.informations?.totalFreeWeightOfCarcasses?.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}Broadcast_management/?date1=${selectedDate1}&date2=${selectedDate2}&kill_house_key=${item?.key}`}
            rel="noreferrer"
          >
            <Button color="success">
              <RiFileExcel2Fill size={24} />
            </Button>
          </a>
        </Tooltip>,
      ];
    });
    setDataTable(d);
  }, [getProvinceBuyersAllocations]);

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