import React, { useContext, useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Button, TextField, Tooltip, Typography } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import axios from "axios";
import { RiFileExcel2Fill } from "react-icons/ri";
import { formatJustDate } from "../../../../utils/formatTime";
import { provinceGetSlaughterSurveillanceService } from "../../services/province-get-slaughter-surverillance-service";
import { useSystemName } from "../../../../utils/getSystemName";

export const ProvinceSlaughterSurveillance = () => {
  const dispatch = useDispatch();
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const { slaughterSurveillance } = useSelector((item) => item.provinceSlice);
  const [openNotif] = useContext(AppContext);
  const systemName = useSystemName();

  useEffect(() => {
    const currentDate = moment(new Date()).format("YYYY-MM-DD");
    setSelectedDate1(currentDate);
    setSelectedDate2(currentDate);
  }, []);

  useEffect(() => {
    dispatch(
      provinceGetSlaughterSurveillanceService({
        selectedDate1: selectedDate1,
        selectedDate2: selectedDate2,
      })
    );
  }, [selectedDate1, selectedDate2]);

  return (
    <Grid
      container
      p={SPACING.TINY}
      xs={12}
      justifyContent="center"
      alignItems="center"
    >
      <Grid container gap={SPACING.SMALL} xs={12} mt={4}>
        <Grid>
          <DatePicker
            label="از تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField size="small" style={{ width: "160px" }} {...params} />
            )}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid>
          <DatePicker
            label="تا تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField size="small" style={{ width: "160px" }} {...params} />
            )}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Tooltip title="خروجی اکسل گزارش پایش کشتارگاه">
          {/* <a
            href={`${axios.defaults.baseURL}detail_of_killing_excel/?date1=${selectedDate1}&date2=${selectedDate2}`}
            rel="noreferrer"
          > */}
          <Button
            color="primary"
            onClick={() => {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                severity: "success",
              });
              const link = `${axios.defaults.baseURL}comprehensive_report_of_the_slaughterhouse_excel/?date1=${selectedDate1}&date2=${selectedDate2}`;
              window.location.href = link;
            }}
          >
            <RiFileExcel2Fill size={32} />
          </Button>
          {/* </a> */}
        </Tooltip>
      </Grid>

      <Typography m={2} variant="body1">
        گزارش جامع خریداران در فرآیند کشتار مرغ گوشتی {systemName}
      </Typography>
      <div>
        <table className="table-styles">
          <thead>
            <tr className="green-header">
              <th>تعداد کل بارهای ایجاد شده (زنده)</th>
              <th>وزن کل بارهای ایجاد شده (زنده)</th>
              <th>حجم کل بارهای تحویلی کشتارگاه (زنده)</th>
              <th>وزن کل بارهای تحویلی کشتارگاه (زنده)</th>
              <th>وزن تحویلی با افت 25 درصد</th>
              <th>تعداد ورودی به انبار کشتارگاه (لاشه)</th>
              <th>وزن ورودی به انبار کشتارگاه (لاشه)</th>
              <th>
                درصد لاشه ورودی به انبار کشتارگاه نسبت به بار تحویلی کشتارگاه
              </th>
              <th>
                درصد وزن لاشه ورودی به انبار کشتارگاه نسبت به بار تحویلی
                کشتارگاه
              </th>
              <th>درصد تعداد بار تحویلی نسبت به بار ایحاد شده</th>
              <th>درصد وزن بار تحویلی نسبت به بار ایحاد شده</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.quantityOfCreateBar?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightOfCreateBar?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.quantityOfReceiveBar?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightOfReceiveBar?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightWithTwentyFivePercentReceive?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.quantityWarehouse?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightWarehouse?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.quantityPercentWarehouse?.toLocaleString()}
                %
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightPercentWarehouse?.toLocaleString()}
                %
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.quantityPercentReceive?.toLocaleString()}
                %
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.allKillRequest?.weightPercentReceive?.toLocaleString()}
                %
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <Grid xs={12}>
        <Typography m={2} variant="body1" color="secondary">
          اطلاعات کلی توزیع و پخش مرغ گرم از تاریخ{" "}
          {formatJustDate(
            slaughterSurveillance?.generalBroadcastInformations?.date1
          )}{" "}
          تا تاریخ{" "}
          {formatJustDate(
            slaughterSurveillance?.generalBroadcastInformations?.date2
          )}
        </Typography>
      </Grid>

      <div>
        <table className="table-styles">
          <thead>
            <tr className="green-header">
              <th>تعداد خریداران</th>
              <th>تعداد کشتار داخل استان</th>
              <th>وزن کشتار داخل استان</th>
              <th>تعداد خرید خارج استان</th>
              <th>وزن خرید خارج استان</th>
              <th>تعداد جمع کل انبار</th>
              <th>وزن جمع کل انبار</th>
              <th>تعداد توزیع شده</th>
              <th>وزن توزیع شده</th>
              <th>تعداد توزیع / تحویل شده</th>
              <th>وزن توزیع / تحویل شده</th>
              <th>تعداد مانده انبار</th>
              <th>وزن مانده انبار</th>
              <th>درصد توزیع نسبت به ورودی به انبار</th>
              <th>تعداد مباشر تخصیص داده شده</th>
              <th>تعداد صنف تخصیص داده شده</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.numberOfBuyer?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.quantityOfKillRequestInProvince?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.weightOfKillRequestInProvince?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.quantityOfKillRequestOutProvince?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.weightOfKillRequestOutProvince?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.quantityCarcasses?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.weightCarcasses?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.allocatedQuantity?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.allocatedWeight?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.acceptedAllocatedQuantity?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.acceptedAllocatedWeight?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.remainQuantity?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.remainWeight?.toLocaleString()}
              </td>
              <td className="centered-cell">
                %
                {slaughterSurveillance?.generalBroadcastInformations?.percentWarehouse?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.numberOfStewards?.toLocaleString()}
              </td>
              <td className="centered-cell">
                {slaughterSurveillance?.generalBroadcastInformations?.numberOfGiulds?.toLocaleString()}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <Grid container xs={12} justifyContent="center" alignItems="center">
        <Grid xs={4}></Grid>
        <Grid xs={4}>
          <Typography m={2} variant="body1" color="secondary">
            اطلاعات کلی بارها و توزیع خریداران
          </Typography>
        </Grid>
        <Grid xs={4} justifyContent="end" container>
          <Typography sx={{ fontSize: "10px", color: "red" }}>
            *وزن (کیلوگرام)، حجم (قطعه)
          </Typography>
        </Grid>
      </Grid>
      <div className="last-table-container">
        <table className="table-styles" style={{ width: "100%" }}>
          <thead>
            <tr>
              <th className="strong-blue-cell" colSpan={1} rowSpan={2}>
                ردیف
              </th>{" "}
              <th className="strong-blue-cell" colSpan={1} rowSpan={2}>
                خریدار
              </th>{" "}
              <th className="strong-blue-cell" colSpan={1} rowSpan={2}>
                شهرستان
              </th>
              <th className="green-cell" colSpan={2}>
                حجم کل بارهای ایجاد شده توسط کشتارگاه ( زنده)
              </th>
              <th className="green-cell" colSpan={2}>
                حجم کل بارهای تحویلی توسط کشتارگاه( زنده)
              </th>
              <th className="strong-blue-cell" rowSpan={2} colSpan={1}>
                وزن تحویلی با افت 25%
              </th>
              <th className="strong-blue-cell" rowSpan={2} colSpan={1}>
                درصد حجم بار ایجاد شده به تحویلی{" "}
              </th>
              <th className="strong-blue-cell" colSpan={2}>
                ورودی به انبار کشتارگاه(لاشه)
              </th>
              <th className="strong-blue-cell" colSpan={2}>
                درصد لاشه ورودی به انبار کشتارگاه نسبت به بارتحویلی کشتارگاه (با
                افت 25 %)
              </th>
              <th className="strong-blue-cell" colSpan={2}>
                خرید خارج از استان
              </th>
              <th className="strong-blue-cell" colSpan={2}>
                جمع کل انبار
              </th>{" "}
              <th className="strong-blue-cell" colSpan={2}>
                توزیع شده
              </th>{" "}
              <th className="strong-blue-cell" colSpan={2}>
                توزیع/تحویل شده
              </th>{" "}
              <th className="strong-blue-cell" colSpan={2}>
                مانده انبار
              </th>
              <th className="strong-blue-cell" colSpan={1} rowSpan={2}>
                درصد وزن مانده در انبار به ورودی انبار
              </th>
              <th className="strong-blue-cell" colSpan={1} rowSpan={2}>
                تعداد مباشر/ صنف
              </th>
              <th className="strong-blue-cell" colSpan={3}>
                بارهای تخلیه شده و عدم تکمیل(تحویل)
              </th>{" "}
            </tr>
            <tr>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">حجم</th>
              <th className="centered-cell yellow-cell">وزن</th>
              <th className="centered-cell yellow-cell">تعداد بار</th>
              <th className="centered-cell yellow-cell">حجم بار </th>
              <th className="centered-cell yellow-cell">وزن بار </th>
            </tr>
          </thead>
          <tbody>
            {slaughterSurveillance?.killRequestAndBroadcast?.map((item, i) => {
              return (
                <tr key={i} className="row-of-table">
                  <td className="centered-cell detail-cell">{i + 1}</td>
                  <td className="centered-cell detail-cell">{item?.name}</td>
                  <td className="centered-cell detail-cell">{item?.city}</td>
                  <td className="centered-cell detail-cell">
                    {item?.killReqQuantity?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.killReqWeight?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.quantityReceiver?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.weightReceiver?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.twentyFivePercentWeight?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    %{parseInt(item?.receiverPercent?.toLocaleString())}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.quantityOfCarcasses?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.weightOfCarcasses?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    %{parseInt(item?.quantityOfLashePercent?.toLocaleString())}
                  </td>
                  <td className="centered-cell detail-cell">
                    %{parseInt(item?.weightOfLashePercent?.toLocaleString())}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.quantityOutProvince?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.weightOutProvince?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.totalNumberOfCarcasses?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.totalWeightOfCarcasses?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.allocatedQuantity?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.allocatedWeight?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.acceptedAllocatedQuantity?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.acceptedAllocatedWeight?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.remainQuantity?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.remainWeight?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    %{parseInt(item?.remainPercent?.toLocaleString())}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.stewardAndGuild?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.lenKillReqNotComplete?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.quantityKillReqNotComplete?.toLocaleString()}
                  </td>
                  <td className="centered-cell detail-cell">
                    {item?.weightKillReqNotComplete?.toLocaleString()}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </Grid>
  );
};
