import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { useDispatch, useSelector } from "react-redux";
import { slaughterGetPaymentByWeightOverview } from "../../services/slaughter-get-payment-by-weight-overview";
import { SPACING } from "../../../../data/spacing";
import { Typography } from "@mui/material";

export const SlaughterPaymentByWeight = () => {
  const dispatch = useDispatch();
  const [tableData, setTableData] = useState();

  const { slaughterPaymentByWeightOverview } = useSelector(
    (item) => item.slaughterSlice
  );

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

  useEffect(() => {
    const d = slaughterPaymentByWeightOverview?.map((item, i) => {
      return [
        i + 1,
        item?.name,
        item?.wageInfo?.totalPaidWage?.toLocaleString(),
        item?.wageInfo?.totalUnpaidWage?.toLocaleString(),
        item?.wageInfo?.totalWeight?.toLocaleString(),
        item?.wageInfo?.totalWage?.toLocaleString(),
      ];
    });
    setTableData(d);
  }, [slaughterPaymentByWeightOverview]);

  return (
    <Grid justifyContent="center" gap={SPACING.SMALL} xs={12}>
      <SimpleTable
        name={
          <Grid container xs={12} justifyContent="space-between">
            <Grid>
              <Typography variant="body1" style={{ color: "gray" }}>
                اطلاعات کلی
              </Typography>
            </Grid>{" "}
          </Grid>
        }
        columns={[
          "ردیف",
          "نام کشتارگاه",
          "کارمزدهای پرداخت شده (ریال)",
          "کارمزدهای پرداخت نشده (ریال)",
          "مجموع وزنی",
          "مجموع کارمزدها (ریال)",
        ]}
        data={tableData}
      />
    </Grid>
  );
};
