import { useDispatch } from "react-redux";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import axios from "axios";
import { useContext, useEffect, useState } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import moment from "moment";
import { Grid } from "../../../../components/grid/Grid";
import { RiFileExcel2Fill } from "react-icons/ri";
import {
  Button,
  Pagination,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { SPACING } from "../../../../data/spacing";
import { formatJustDate } from "../../../../utils/formatTime";

export const ProvinceTableProcess = () => {
  const dispatch = useDispatch();
  const [textValue, setTextValue] = useState("");
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);

  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const [openNotif] = useContext(AppContext);

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

  const handleTextChange = (event) => {
    setTextValue(event.target.value);
  };

  const width =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;

  const fetchApiData = async (page) => {
    dispatch(LOADING_START());
    let response = await axios.get(
      `poultry_requests_for_total_information/?date1=${selectedDate1}&date2=${selectedDate2}&search=filter&value=${
        textValue ? textValue : ""
      }&page=${page}&page_size=${perPage}`
    );
    setData(response.data.results);
    setTotalRows(response.data.count);
    dispatch(LOADING_END());
  };

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
    fetchApiData(newPage + 1);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    fetchApiData(1);
  };

  useEffect(() => {
    setPerPage(10);
    fetchApiData(1);
  }, [selectedDate1, selectedDate2]);

  return (
    <Grid>
      <Grid
        container
        alignItems="center"
        gap={SPACING.SMALL}
        mb={SPACING.SMALL}
      >
        <Typography>روند پرونده ها</Typography>
        <Grid style={{ width: "150px" }}>
          <DatePicker
            label="از تاریخ"
            id="date"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid style={{ width: "150px" }}>
          <DatePicker
            label="تا تاریخ"
            id="date"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <TextField
          autoComplete="off"
          size="small"
          label="جستجو"
          variant="outlined"
          style={{ width: 250 }}
          onChange={handleTextChange}
          value={textValue}
        />
        <Button type="submit" onClick={handleSubmit}>
          جستجو
        </Button>
        <Tooltip title="خروجی اکسل">
          <Button
            color="success"
            onClick={() => {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                severity: "success",
              });
              const link = `${axios.defaults.baseURL}poultry_request_report_excel/?start=${selectedDate1}&end=${selectedDate2}`;
              window.location.href = link;
            }}
          >
            <RiFileExcel2Fill size={32} />
          </Button>
        </Tooltip>
        <Tooltip title="خروجی اکسل گزارش جامع">
          <Button
            color="warning"
            onClick={() => {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                severity: "success",
              });
              const link = `${axios.defaults.baseURL}detail_of_killing_excel/?date1=${selectedDate1}&date2=${selectedDate2}`;
              window.location.href = link;
            }}
          >
            <RiFileExcel2Fill size={32} />
          </Button>
        </Tooltip>
      </Grid>

      <div className="process-table" style={{ width: width - 200 }}>
        <table>
          <tr>
            <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>
            <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>
            <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>
            <th>اطلاعات تکمیلی وزن</th>
            <th>کاربر کشتارگاه</th>
            <th>تلفن کاربر کشتارگاه</th>
          </tr>
          {data?.map((item, i) => {
            const rowSpan =
              item?.killHouseRequests?.killHouseRequestsSerializer?.length + 1;
            let stateReq = "";
            if (item.stateProcess === "accepted") {
              stateReq = "تایید شده";
            } else if (item.stateProcess === "pending") {
              stateReq = "در انتظار تایید";
            } else if (item.stateProcess === "rejected") {
              stateReq = "رد شده";
            }
            return (
              <>
                <tr key={item.key}>
                  <td rowSpan={rowSpan}>{item.orderCode}</td>
                  <td rowSpan={rowSpan}>{item.poultry.unitName}</td>
                  <td rowSpan={rowSpan}>{item.poultry.user.fullname}</td>
                  <td rowSpan={rowSpan}>{item.poultry.user.mobile}</td>
                  <td rowSpan={rowSpan}>
                    {`${item.poultry.address.province.name} - ${item.poultry.address.city.name} - ${item.poultry.address.address}`}
                  </td>
                  <td rowSpan={rowSpan}>تاریخ جوجه ریزی</td>
                  <td rowSpan={rowSpan}>
                    {item?.hatching?.quantity?.toLocaleString()}
                  </td>
                  <td rowSpan={rowSpan}>{item.hatching.age}</td>
                  <td rowSpan={rowSpan}>{item?.quantity?.toLocaleString()}</td>
                  <td rowSpan={rowSpan}>
                    {item.quantity * item.IndexWeight} کیلوگرم
                  </td>
                  <td rowSpan={rowSpan}>
                    {item.freeSaleInProvince ? "آزاد" : "دولتی"}
                  </td>
                  <td rowSpan={rowSpan}>قیمت مرغ زنده</td>
                  <td rowSpan={rowSpan}>
                    {item?.provinceKillRequests?.provinceKillRequestsTotalInfo?.allocatedQuantity?.toLocaleString()}
                  </td>
                  <td rowSpan={rowSpan}>
                    {item?.provinceKillRequests?.provinceKillRequestsTotalInfo?.poultryRequestRemainQuantity?.toLocaleString()}
                  </td>
                  <td rowSpan={rowSpan}>{item.hatching.leftOver}</td>
                  <td rowSpan={rowSpan}>{item.chickenBreed}</td>
                  <td rowSpan={rowSpan}>{formatJustDate(item.sendDate)}</td>
                  <td rowSpan={rowSpan}>دامپزشک فارم</td>
                  <td rowSpan={rowSpan}>تلفن دامپزشک فارم</td>
                  <td rowSpan={rowSpan}>{stateReq}</td>
                  <td rowSpan={rowSpan}>خریدار</td>
                  <td rowSpan={rowSpan}>تعداد تخصیصی قطعه</td>
                  <td rowSpan={rowSpan}>وزن تخصیصی</td>
                  <td rowSpan={rowSpan}>تاریخ تخصیص</td>
                  <td rowSpan={rowSpan}>نوع تخصیص</td>
                  <td rowSpan={rowSpan}>آدرس</td>
                  <td rowSpan={rowSpan}>محل کشتار</td>
                  <td rowSpan={rowSpan}>وضعیت تخصیص به خریدار</td>
                  <td rowSpan={rowSpan}>تعداد بار ایجاد شده</td>
                  <td rowSpan={rowSpan}>حجم تخصیصی به بار</td>
                  <td rowSpan={rowSpan}>وزن تخصیصی به بار</td>
                  <td rowSpan={rowSpan}>مانده قطعه قابل تخصیص</td>
                  <td rowSpan={rowSpan}>مانده وزن قابل تخصیص</td>
                </tr>
                {item?.killHouseRequests?.killHouseRequestsSerializer?.map(
                  (buyer, i) => {
                    return (
                      <tr key={buyer.key}>
                        <td>{buyer?.addCar?.driver?.typeCar}</td>
                        <td>{buyer?.addCar?.driver?.driverName}</td>
                        <td>{"تلفن"}</td>
                        <td>{"کدبهداشتی حمل و نقل"}</td>
                        <td>{"کدرهگیری سامانه قرنطینه"}</td>
                        <td>{"تعداد ثبت شده در قرنطینه"}</td>
                        <td>{"حجم بار"}</td>
                        <td>{"وزن بار"}</td>
                        <td>{"وضعیت بار"}</td>
                        <td>{"تعداد تخلیه"}</td>
                        <td>{"وزن تخلیه"}</td>
                        <td>{"تاریخ تخلیه کشتارگاه"}</td>
                        <td>{"دامپزشک کشتارگاه"}</td>
                        <td>{"تلفن دامپزشک کشتارگاه"}</td>
                        <td>{"اطلاعات تکمیلی قطعه"}</td>
                        <td>{"اطلاعات تکمیلی وزن"}</td>
                        <td>{"کاربر کشتارگاه"}</td>
                        <td>{"تلفن کاربر کشتارگاه"}</td>
                      </tr>
                    );
                  }
                )}
              </>
            );
          })}
        </table>
      </div>
      <Grid container justifyContent="center" mt={SPACING.SMALL}>
        <Pagination
          count={Math.ceil(totalRows / perPage)}
          page={page + 1}
          variant="outlined"
          onChange={(event, newPage) => {
            handleChangePage(event, newPage - 1);
          }}
        />
      </Grid>
    </Grid>
  );
};
