import { Box } from "@mui/system";
import { format } from "date-fns-jalali";
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 { avicultureGetProfile } from "../../services/aviculture-get-profile";

export const AvicultureProfile = () => {
  const { profile } = useSelector((state) => state.avicultureSlice);
  const dispatch = useDispatch();

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

  const avicultures = profile?.aviculture;

  return (
    <Box>
      <Grid container gap={SPACING.LARGE}>
        <Grid container direction="column" xs={12}>
          <Grid
            container
            direction="column"
            justifyContent="space-between"
            gap={SPACING.SMALL}
          >
            {avicultures?.map((item, i) => (
              <>
                <Grid>
                  <SimpleTable
                    key={"avicultures" + i}
                    name={`اطلاعات مرغداری ${item.unitName}`}
                    columns={[
                      "شناسه پرورش دهنده",
                      "آدرس",
                      "تعداد سالن ها",
                      "تعداد پارتی",
                      "تاریخ آخرین پارتی",
                      "کد سیستمی",
                      "کد اپیدمیولوژیک",
                    ]}
                    data={[
                      [
                        item.breedingUniqueId
                          ? item.breedingUniqueId
                          : "نامشخص",
                        `${item.address.province.name} - ${
                          item.address.city.name
                        } ${
                          item.address.address
                            ? " - " + item.address.address
                            : ""
                        }`,
                        item.numberOfHalls,
                        item.numberOfParty,
                        format(new Date(item?.lastPartyDate), "yyyy/MM/dd"),
                        item.systemCode,
                        item.epidemiologicalCode,
                      ],
                    ]}
                  />
                </Grid>
                <Grid>
                  <ChangeCardInfo item={item} />
                </Grid>
              </>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};
