import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { useDispatch } from "react-redux";
import { provinceJahadGetRancherDetailsService } from "../../services/province-jahad-get-rancher-details";

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

  useEffect(() => {
    dispatch(
      provinceJahadGetRancherDetailsService({ herd_code: item?.herdCode })
    ).then((r) => {
      setTableData(r.payload.data);
    });
  }, []);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <SimpleTable
        columns={[
          "تعداد دام سبک",
          "تعداد دام سنگین",
          "جمع کل گله",
          "گاو",
          "گوسفند",
          "بز",
          "شتر",
          "اسب",
        ]}
        data={[
          [
            tableData?.lightLivestock,
            tableData?.heavyLivestock,
            Math.round(
              tableData?.lightLivestock + tableData?.heavyLivestock
            ).toLocaleString(),
            tableData?.cow,
            tableData?.sheep,
            tableData?.goat,
            tableData?.camel,
            tableData?.horse,
          ],
        ]}
      />
    </Grid>
  );
};
