import { Box, IconButton } from "@mui/material";
import React, { useEffect, useState } from "react";
import { Grid } from "../components/grid/Grid";
import { useDispatch } from "react-redux";
import { getStewards } from "../features/province/services/provinceGetStewards";
import { AdvancedTable } from "../components/advanced-table/AdvancedTable";
import ReceiptIcon from "@mui/icons-material/Receipt";
import { DRAWER } from "../lib/redux/slices/appSlice";
import MainPlaceFullInfo from "../features/province/components/province-place-full-info/MainPlaceInfo";
import { useProvinceName } from "../utils/getProvinceName";

const ProvinceGuildsTransactions = () => {
  const dispatch = useDispatch();
  const [transactions, setTransactions] = useState();
  const [tableData, settableData] = useState();
  const provinceName = useProvinceName();

  useEffect(() => {
    dispatch(getStewards(provinceName)).then((r) => {
      setTransactions(r.payload.data);
    });
  }, []);

  useEffect(() => {
    const d = transactions?.map((item, i) => {
      return [
        i + 1,
        item?.guild_info.fullname,
        item?.guild_info.mobile,
        item?.ware_house_info.quantity.toLocaleString(),
        <IconButton
          key={i}
          aria-label="delete"
          color="primary"
          onClick={() => {
            dispatch(
              DRAWER({
                title: "مشخصات کامل محل",
                right: false,
                bottom: true,
                content: <MainPlaceFullInfo item={item} />,
              })
            );
          }}
        >
          <ReceiptIcon />
        </IconButton>,
      ];
    });
    settableData(d);
  }, [transactions]);
  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        {" "}
        <AdvancedTable
          name="لیست اصناف"
          data={tableData}
          columns={["ردیف", "نام کامل", "موبایل", "موجودی", "مشاهده تراکنش ها"]}
        />
      </Grid>
    </Box>
  );
};

export default ProvinceGuildsTransactions;
