import React, { useEffect, useState } from "react";
import { Box, Button, Grid, TextField } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { useDispatch } from "react-redux";
import { BackButton } from "../../../../components/back-button/BackButton";

import { OPEN_MODAL, CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { SlaughterManageDispensersForm } from "./SlaughterManageDispensersForm";
import { slaughterGetDispenserInfoService } from "../../services/slaughter-get-dispenser-info";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { SPACING } from "../../../../data/spacing";
import { RiSearchLine } from "react-icons/ri";
import { formatJustDate } from "../../../../utils/formatTime";

const SlaughterManageDispensers = () => {
  const dispatch = useDispatch();
  const [data, setData] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const [textValue, setTextValue] = useState("");
  const [page, setPage] = useState(1);
  const [tableData, setTableData] = useState([]);
  const [selectedDate1, setSelectedDate1] = useState(null);
  const [selectedDate2, setSelectedDate2] = useState(null);

  const handleTextChange = (e) => setTextValue(e.target.value);

  const fetchApiData = async (pageNum) => {
    const response = await dispatch(
      slaughterGetDispenserInfoService({
        search: "filter",
        value: textValue,
        page: pageNum,
        page_size: perPage,
        ...(selectedDate1 && {
          date_from: moment(selectedDate1).format("YYYY-MM-DD"),
        }),
        ...(selectedDate2 && {
          date_to: moment(selectedDate2).format("YYYY-MM-DD"),
        }),
      })
    );

    if (response.payload.error) {
      console.error("Error fetching data:", response.payload.error);
      setData([]);
      setTotalRows(0);
    } else {
      setData(response.payload.data?.results || []);
      const count = Number(response.payload.data?.count) || 0;
      setTotalRows(count);
    }
  };

  const handlePageChange = (pageNum) => {
    fetchApiData(pageNum);
    setPage(pageNum);
  };

  const handlePerRowsChange = (perRows) => {
    setPerPage(Number(perRows));
    setPage(1);
  };

  const updateTableData = () => {
    fetchApiData(page !== 0 ? page : 1);
  };

  useEffect(() => {
    if (!data || !Array.isArray(data)) {
      setTableData([]);
      return;
    }
    const d = data.map((item, i) => {
      return [
        page === 1 ? i + 1 : i + perPage * (page - 1) + 1,
        item?.nationalId || "-",
        item?.firstName || "-",
        item?.lastName || "-",
        item?.mobile || "-",
        item?.city || "-",
        item?.province || "-",
        item?.active !== undefined ? (item.active ? "فعال" : "غیرفعال") : "-",
        item?.createDate ? formatJustDate(item.createDate) : "-",
      ];
    });
    setTableData(d);
  }, [data, page, perPage]);

  useEffect(() => {
    fetchApiData(1);
    setPage(1);
  }, [perPage]);

  useEffect(() => {
    fetchApiData(1);
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setPage(1);
    const response = await dispatch(
      slaughterGetDispenserInfoService({
        search: "filter",
        value: textValue,
        page: 1,
        page_size: perPage,
        ...(selectedDate1 && {
          date_from: moment(selectedDate1).format("YYYY-MM-DD"),
        }),
        ...(selectedDate2 && {
          date_to: moment(selectedDate2).format("YYYY-MM-DD"),
        }),
      })
    );

    if (response.payload.error) {
      console.error("Error fetching data:", response.payload.error);
      setData([]);
      setTotalRows(0);
    } else {
      setData(response.payload.data?.results || []);
      const count = Number(response.payload.data?.count) || 0;
      setTotalRows(count);
    }
  };

  const handleOpenModal = () => {
    dispatch(
      OPEN_MODAL({
        title: "ثبت توزیع کننده جدید",
        content: (
          <SlaughterManageDispensersForm
            onClose={() => dispatch(CLOSE_MODAL())}
            updateTable={updateTableData}
          />
        ),
        size: 300,
      })
    );
  };

  return (
    <Box display="flex" justifyContent="center">
      <Grid container xs={12} sm={12} md={10} lg={10}>
        <Grid item xs={12}>
          <BackButton />
        </Grid>
        <Grid container item gap={SPACING.SMALL}>
          <Button variant="contained" color="primary" onClick={handleOpenModal}>
            ثبت توزیع کننده جدید
          </Button>
          <form onSubmit={handleSubmit}>
            <Grid container alignItems="center" gap={SPACING.SMALL}>
              <TextField
                size="small"
                autoComplete="off"
                label="جستجو"
                variant="outlined"
                style={{ width: 200 }}
                value={textValue}
                onChange={handleTextChange}
              />

              <DatePicker
                label="از تاریخ"
                value={selectedDate1}
                onChange={(newValue) => {
                  setSelectedDate1(newValue);
                }}
                renderInput={(params) => (
                  <TextField {...params} size="small" style={{ width: 160 }} />
                )}
              />

              <DatePicker
                label="تا تاریخ"
                value={selectedDate2}
                onChange={(newValue) => {
                  setSelectedDate2(newValue);
                }}
                renderInput={(params) => (
                  <TextField {...params} size="small" style={{ width: 160 }} />
                )}
              />

              <Button
                type="submit"
                onClick={handleSubmit}
                endIcon={<RiSearchLine />}
              >
                جستجو
              </Button>
            </Grid>
          </form>
        </Grid>

        <Grid item xs={12} mt={2}>
          <ResponsiveTable
            title="توزیع کنندگان"
            columns={[
              "ردیف",
              "کد ملی",
              "نام",
              "نام خانوادگی",
              "شماره همراه",
              "شهر",
              "استان",
              "وضعیت",
              "تاریخ ایجاد",
            ]}
            customWidth={"100%"}
            data={tableData}
            handlePageChange={handlePageChange}
            totalRows={totalRows}
            page={page}
            perPage={perPage}
            handlePerRowsChange={handlePerRowsChange}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

export default SlaughterManageDispensers;
