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 { ChangeCardInfo } from "../../../authentication/components/change-card-info/ChangeCardInfo";
import { slaughterGetProfile } from "../../services/slaughter-get-profile";

export const SlaughterProfile = () => {
  const { profile } = useSelector((state) => state.slaughterSlice);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(slaughterGetProfile()).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}
          >
            <>
              {profile?.killHouse?.map((killHouse) => {
                return (
                  <Grid key={killHouse.name}>
                    <SimpleTable
                      name={`اطلاعات کشتارگاه ${killHouse.name}`}
                      columns={[
                        "نام کامل",
                        "تلفن",
                        "آدرس",
                        "ظرفیت",
                        "آدرس سیستمی",
                      ]}
                      data={[
                        [
                          killHouse.name,
                          killHouse.phone,
                          killHouse.address,
                          killHouse.capacity,
                          killHouse.systemAddress.address,
                        ],
                      ]}
                    />
                  </Grid>
                );
              })}

              <Grid>
                <ChangeCardInfo item={profile?.killHouseOperator} />
              </Grid>
            </>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};
