import { Box, Card, IconButton } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { AdvancedTable } from "../components/advanced-table/AdvancedTable";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { avicultureGetReports } from "../features/aviculture/services/aviculture-get-reports";
import PlagiarismIcon from "@mui/icons-material/Plagiarism";
import { ROUTE_AVICULTURE_FILE } from "../routes/routes";
import { AvicultureReportsCharts } from "../features/aviculture/components/aviculture-reports-charts/AvicultureReportsCharts";
import { format } from "date-fns-jalali";

const AvicultureReports = () => {
  const dispatch = useDispatch();
  const { reports } = useSelector((state) => state.avicultureSlice);
  const [tableData, setTableData] = useState();
  const navigate = useNavigate();

  useEffect(() => {
    dispatch(avicultureGetReports());
  }, []);

  useEffect(() => {
    const d = reports?.table.map((item, i) => {
      return [
        i + 1,
        item.hatchingPeriod,
        format(new Date(item?.hatchingDate), "yyyy/MM/dd"),
        item.hatchingChickenBreed,
        item.age,
        item.quantity,
        item.weightOfSuffering,
        item.averageFee,
        item.averageWeight,
        item.salesPrice.toLocaleString(),
        item.totalAmount.toLocaleString(),
        item.paidState === "paid"
          ? "پرداخت شده"
          : item.paidState === "pending"
          ? "در انتظار پرداخت"
          : "ندارد",
        <IconButton
          key={i}
          aria-label="delete"
          color="primary"
          className="avicultureActiveRequestsBtn"
          onClick={() => navigate(ROUTE_AVICULTURE_FILE + item?.requestId)}
        >
          <PlagiarismIcon />
        </IconButton>,
      ];
    });

    setTableData(d);
  }, [reports]);
  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid xs={12} mt={SPACING.SMALL}>
          <Grid width="100%" className="avicultureActiveRequestsView">
            <Card>
              <AdvancedTable
                name={"گزارش مرغدار"}
                columns={[
                  "ردیف",
                  "دوره جوجه ریزی",
                  "تاریخ جوجه ریزی",
                  "نژاد",
                  "سن",
                  "تعداد",
                  //   "تلفات",
                  "رنج وزن",
                  "قیمت رنج",
                  "میانگین وزن شما",
                  "قیمت فروش",
                  "جمع مبلغ به تومان",
                  "تراکنش مالی",
                  "نمایش پرونده",
                ]}
                data={tableData}
              />
            </Card>
          </Grid>

          <AvicultureReportsCharts data={reports} />
        </Grid>
      </Grid>
    </Box>
  );
};

export default AvicultureReports;
