import { Chip, Divider, Typography } from "@mui/material";
import { Box } from "@mui/system";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { formatTime } from "../../../../utils/formatTime";
import { avicultureGetProfile } from "../../services/aviculture-get-profile";

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

  useEffect(() => {
    dispatch(avicultureGetProfile());
  }, []);
  const userProfile = profile?.profile;

  const userData = [
    ["نام", userProfile?.firstName],
    ["نام خانوادگی", userProfile?.lastName],
    ["موبایل", userProfile?.mobile],
    ["استان", userProfile?.province?.name],
    ["شهر", userProfile?.city.name],
    [
      "تاریخ تولد",
      userProfile?.birthday ? formatTime(userProfile?.birthday) : null,
    ],
  ];
  return (
    <Box>
      <Grid container direction="column">
        <Grid>
          <Divider textAlign="left">
            <Chip label="اطلاعات کاربر مرغدار" />
          </Divider>
        </Grid>
        <Grid
          container
          justifyContent="space-between"
          gap={SPACING.SMALL}
          mt={SPACING.MEDIUM}
        >
          {userData?.map((item, i) => (
            <Grid
              container
              gap={SPACING.SMALL}
              key={i}
              flexGrow="1"
              flexBasis="250px"
            >
              <Typography variant="body2" fontWeight={"bold"}>
                {item[0] + ":"}
              </Typography>
              <Typography variant="body2">
                {item[1] ? item[1] : "نامشخص"}
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Box>
  );
};
