import { IconButton } from "@mui/material";
import { Box } from "@mui/system";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { Grid } from "../components/grid/Grid";
import { SimpleTable } from "../components/simple-table/SimpleTable";
import { SPACING } from "../data/spacing";
import { provinceFinancialGetRegisteredComplaints } from "../features/province-finacial/services/province-financial-get-registered-compaints";
import { LOADING_END, LOADING_START } from "../lib/redux/slices/appSlice";
import { ROUTE_PROVINCE_FINANCIAL_FILE } from "../routes/routes";
import PlagiarismIcon from "@mui/icons-material/Plagiarism";
import { formatJustDate } from "../utils/formatTime";

const ProvinceFinancialComplaints = () => {
  const [dataTable, setDataTable] = useState();
  const navigate = useNavigate();

  const dispatch = useDispatch();

  const { registeredComplaints } = useSelector(
    (state) => state.provinceFinancialSlice
  );

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(provinceFinancialGetRegisteredComplaints()).then((r) => {
      dispatch(LOADING_END());
    });
  }, []);

  useEffect(() => {
    const d = registeredComplaints?.map((item, i) => {
      return [
        item.title,
        item.description,
        formatJustDate(item?.createDate),
        item.state === "pending"
          ? "در حال بررسی"
          : item.state === "accepted"
          ? "تایید شده"
          : "رد شده",
        <IconButton
          key={i}
          aria-label="delete"
          color="primary"
          className="avicultureActiveRequestsBtn"
          onClick={() =>
            navigate(ROUTE_PROVINCE_FINANCIAL_FILE + item.poultryRequestId)
          }
        >
          <PlagiarismIcon />
        </IconButton>,
      ];
    });
    setDataTable(d);
  }, []);
  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
            <Grid xs={12}>
              <Grid mt={SPACING.SMAll}>
                <SimpleTable
                  name="شکایات ثبت شده"
                  columns={[
                    " موضوع",
                    " توضیحات",
                    " تاریخ ثبت",
                    " وضعیت",
                    " پرونده",
                  ]}
                  data={dataTable}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default ProvinceFinancialComplaints;
