import { Box } from "@mui/system";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../components/grid/Grid";
import { SimpleTable } from "../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../data/spacing";
import { LOADING_END, LOADING_START } from "../../../lib/redux/slices/appSlice";
import { guildGetProfile } from "../services/guild-get-profile";

export const GuildProfile = () => {
  const { guildProfile } = useSelector((state) => state.generalSlice);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(guildGetProfile()).then((r) => {
      dispatch(LOADING_END());
    });
  }, []);

  return (
    <Box>
      <Grid container gap={SPACING.LARGE}>
        <Grid container direction="column" xs={12}>
          <Grid
            container
            direction="column"
            justifyContent="space-between"
            gap={SPACING.SMALL}
          >
            <>
              <Grid>
                <SimpleTable
                  name={`اطلاعات صنف`}
                  columns={[
                    "نام صنف",
                    "شناسه صنف",
                    "شماره مجوز",
                    "حوزه فعالیت",
                    "نوع فعالیت",
                    "محدودیت مباشر",
                    "محدودیت کشتارگاه",
                  ]}
                  data={[
                    [
                      guildProfile?.guildsName,
                      guildProfile?.guildsId,
                      guildProfile?.licenseNumber,
                      guildProfile?.areaActivity,
                      guildProfile?.typeActivity,
                      guildProfile?.centersAllocation
                        ?.map((item) => item.label)
                        .join(" - "),
                      guildProfile?.killHouseCentersAllocation
                        ?.map((item) => item.label)
                        .join(" - "),
                    ],
                  ]}
                />
              </Grid>
            </>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};
