import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { useDispatch } from "react-redux";
import { provinceSubSectorStewardSharesStewardsService } from "../../services/province-sub-sectors-services";

export const ProvinceSubSectorStewardSharesOverview = ({ getParams }) => {
  const dispatch = useDispatch();

  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    dispatch(provinceSubSectorStewardSharesStewardsService(getParams())).then(
      (r) => {
        const d = r.payload.data?.map((item, i) => {
          return [
            i + 1,
            `${item?.user?.fullname} (${item?.user?.mobile})`,
            item?.user?.city,
            Math.round(item?.wageInfo?.buyWeight),
            Math.round(item?.wageInfo?.sellWeight),
            Math.round(item?.wageInfo?.totalWage),
            Math.round(item?.wageInfo?.guildDeposit),
            Math.round(item?.wageInfo?.remainWage),
          ];
        });
        setTableData(d);
      }
    );
  }, [dispatch, getParams]);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <ResponsiveTable
        paginated
        columns={[
          "ردیف",
          "کاربر",
          "شهر",
          "کل وزن دریافتی",
          "کل وزن فروش رفته",
          "مجموع تعرفه (ریال)",
          "واريزی اتحاديه (ریال)",
          "مانده تعرفه (ریال)",
        ]}
        data={tableData}
        title="اتحادیه های پروتتینی"
      />
    </Grid>
  );
};
