import {
  Button,
  Pagination,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment/moment";
import { RiFileExcel2Fill, RiSearchLine } from "react-icons/ri";
import axios from "axios";
import { AppContext } from "../../../../contexts/AppContext";
import { useContext, useEffect, useState } from "react";
import { SPACING } from "../../../../data/spacing";
import { ProvinceCasesItem } from "../province-cases-item/ProvinceCasesItem";
import { useDispatch, useSelector } from "react-redux";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { provinceGetCasesOverview } from "../../services/get-cases-overview";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";

export const ProvinceCases = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const [textValue, setTextValue] = useState("");
  const [data, setData] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const dispatch = useDispatch();

  const { casesOverview } = useSelector((item) => item.provinceSlice);

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

  const [page, setPage] = useState(1);

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

  // const handlePageChange = (page) => {
  //   fetchApiData(page, textValue);
  // };

  // const handlePerRowsChange = async (newPerPage, page) => {
  //   setLoading(true);
  //   let response = await axios.get(
  //     `Poultry_Request/?state=accepted&date1=${selectedDate1}&date2=${selectedDate2}&search=filter&value=${
  //       textValue ? textValue : ""
  //     }&page=${page}&page_size=${newPerPage}`
  //   );

  //   setData(response.data.results);
  //   setTotalRows(response.data.count);
  //   setPerPage(newPerPage);

  //   setLoading(false);
  // };
  const userKey = useSelector((state) => state.userSlice.userProfile.key);

  const [openNotif] = useContext(AppContext);

  useEffect(() => {
    setPerPage(10);
    fetchApiData(1);
    dispatch(
      provinceGetCasesOverview({ date1: selectedDate1, date2: selectedDate2 })
    );
  }, [selectedDate1, selectedDate2]);

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

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

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

  return (
    <Grid container p={SPACING.TINY} xs={12}>
      <Grid container alignItems="center" gap={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>
        {/* <form onSubmit={handleSubmit}> */}
        <TextField
          autoComplete="off"
          size="small"
          label="جستجو"
          variant="outlined"
          style={{ width: 250 }}
          onChange={handleTextChange}
          value={textValue}
        />
        <Button
          // disabled={!textValue}
          type="submit"
          onClick={handleSubmit}
          endIcon={<RiSearchLine />}
        >
          جستجو
        </Button>
        {/* </form> */}
        <Tooltip title="خروجی اکسل">
          {/* <a
            href={`${axios.defaults.baseURL}poultry_request_report_excel/?start=${selectedDate1}&end=${selectedDate2}`}
            rel="noreferrer"
          > */}
          <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}&role=${getRoleFromUrl()}&key=${userKey}`;
              window.location.href = link;
            }}
          >
            <RiFileExcel2Fill size={32} />
          </Button>
          {/* </a> */}
        </Tooltip>
        <Tooltip title="خروجی اکسل گزارش جامع">
          {/* <a
            href={`${axios.defaults.baseURL}detail_of_killing_excel/?date1=${selectedDate1}&date2=${selectedDate2}`}
            rel="noreferrer"
          > */}
          <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}&role=${getRoleFromUrl()}&key=${userKey}`;
              window.location.href = link;
            }}
          >
            <RiFileExcel2Fill size={32} />
          </Button>
          {/* </a> */}
        </Tooltip>
      </Grid>
      <Grid width="100%" mt={SPACING.SMALL} isDashboard>
        <Grid container mb={2}>
          <ResponsiveTable
            title={"خلاصه اطلاعات"}
            noPagination
            isDashboard
            columns={[
              "تعداد پرونده ها",
              "تعداد مرغداران",
              "درخواست های کشتار (حجم)",
              "درخواست های کشتار (وزن)",
              "تعداد پرونده خارج از استان",
              "خارج استان (تعداد)",
              "خارج استان (وزن)",
              "تعداد تخصیصات",
              "تعداد بار",
              "تعداد خریداران",
              "تعداد بار دارای کد قرنطینه",
              "تعداد بار بدون کد قرنطینه",
              "تعداد بار تخلیه شده توسط دامپزشک",
              "تعداد بار تخلیه نشده توسط دامپزشک",
              "تعداد بار تکمیل شده توسط کشتارگاه",
              "تعداد بار تکمیل نشده توسط کشتارگاه",
              "جزئیات کامل",
            ]}
            data={[
              [
                casesOverview?.poultryRequests?.toLocaleString(),
                casesOverview?.poultry?.toLocaleString(),
                casesOverview?.poultryRequestsQuantity?.toLocaleString(),
                casesOverview?.poultryRequestsWeight?.toLocaleString(),
                casesOverview?.outPoultryRequest?.toLocaleString(),
                parseInt(
                  casesOverview?.outPoultryRequestQuantity
                )?.toLocaleString(),
                parseInt(
                  casesOverview?.outPoultryRequestWeight
                )?.toLocaleString(),
                casesOverview?.provinceKillRequests?.toLocaleString(),
                casesOverview?.killHouseRequests?.toLocaleString(),
                casesOverview?.provinceKillRequestsBuyers?.toLocaleString(),
                casesOverview?.killHouseRequestsWithQuarantineCode?.toLocaleString(),
                casesOverview?.killHouseRequestsWithoutQuarantineCode?.toLocaleString(),
                casesOverview?.killHouseRequestsWithKillHouseVetAccepted?.toLocaleString(),
                casesOverview?.killHouseRequestsWithoutKillHouseVetAccepted?.toLocaleString(),
                casesOverview?.killHouseRequestsWithKillHouseAssignment?.toLocaleString(),
                casesOverview?.killHouseRequestsWithoutKillHouseAssignment?.toLocaleString(),
                <Button
                  key="ss"
                  color="warning"
                  onClick={() => {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                      severity: "success",
                    });
                    const link = `${
                      axios.defaults.baseURL
                    }detail_of_killing_excel/?date1=${selectedDate1}&date2=${selectedDate2}&role=${getRoleFromUrl()}&key=${userKey}`;
                    window.location.href = link;
                  }}
                >
                  <RiFileExcel2Fill size={30} />
                </Button>,
              ],
            ]}
          />
        </Grid>
        <Grid alignItems="center" justifyContent="center">
          {data.map((item, i) => (
            <ProvinceCasesItem
              key={i}
              caseData={item}
              caseIndex={i}
              pageIndex={page !== 1 ? page * perPage - 9 : 1}
              data={data}
            />
          ))}
          {!!data?.length && (
            <Grid container justifyContent="center" mt={SPACING.SMALL}>
              <Pagination
                count={Math.ceil(totalRows / perPage)}
                page={page}
                variant="outlined"
                onChange={(event, newPage) => {
                  handleChangePage(event, newPage - 1);
                }}
              />
            </Grid>
          )}
        </Grid>
      </Grid>
    </Grid>
  );
};
