import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { TextField } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import moment from "moment";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { slaughterSellCarcassOutProvinceGetDashboard } from "../../../slaughter-house/services/slaughter-sell-carcass-out-province";

export const ProvinceDispensersSellCarcassSellOut = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const dispatch = useDispatch();
  useEffect(() => {
    const currentDate = moment(new Date()).format("YYYY-MM-DD");
    setSelectedDate1(currentDate);
    setSelectedDate2(currentDate);
  }, []);

  const [dashboardData, setDashboardData] = useState([]);

  useEffect(() => {
    dispatch(
      slaughterSellCarcassOutProvinceGetDashboard({
        selectedDate1,
        selectedDate2,
      })
    ).then((r) => {
      setDashboardData(r.payload.data);
    });
  }, [selectedDate1, selectedDate2]);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center" gap={2}>
      <Grid
        container
        xs={12}
        justifyContent="start"
        alignItems="center"
        gap={2}
        mt={2}
      >
        <Grid>
          <DatePicker
            label="از تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField style={{ width: "160px" }} {...params} size="small" />
            )}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid>
          <DatePicker
            label="تا تاریخ"
            id="date"
            renderInput={(params) => (
              <TextField style={{ width: "160px" }} {...params} size="small" />
            )}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        {/* <Grid>
      <form onSubmit={handleSubmit}>
        <TextField
          id="outlined-basic"
          size="small"
          label="جستجو"
          variant="outlined"
          style={{ width: 250 }}
          onChange={handleTextChange}
        />
        <Button
          // disabled={!textValue}
          type="submit"
          onClick={handleSubmit}
                    endIcon={<RiSearchLine />}

        >
          جستجو
        </Button>
      </form>
    </Grid>
    <Tooltip title="خروجی اکسل">
      <a
        href={`${
          axios.defaults.baseURL
        }kill_house_free_sale_bar_information_for_excel_excel/?key=${userKey}&role=${getRoleFromUrl()}&date1=${selectedDate1}&date2=${selectedDate2}`}
        rel="noreferrer"
      >
        <Button color="success">
          <RiFileExcel2Fill size={32} />
        </Button>
      </a>
    </Tooltip> */}
      </Grid>

      <Grid container xs={12} mt={2} mb={4} isDashboard xs={12}>
        <ResponsiveTable
          noPagination
          isDashboard
          columns={[
            "تعداد درخواست فروش",
            "تعداد خریداران",
            "حجم کل لاشه ها",
            "وزن کل لاشه ها",
          ]}
          data={[
            [
              dashboardData?.numberOfAllocations?.toLocaleString(),
              dashboardData?.numberOfBuyers?.toLocaleString(),
              dashboardData?.totalNumberOfAllocationCarcasses?.toLocaleString(),
              dashboardData?.totalWeightOfAllocationCarcasses?.toLocaleString(),
            ],
          ]}
          title={"خلاصه اطلاعات"}
        />
      </Grid>
    </Grid>
  );
};
