import { Typography } from "@mui/material";
import React from "react";
import { Grid } from "../../../../../components/grid/Grid";
import { SPACING } from "../../../../../data/spacing";
import CheckIcon from "@mui/icons-material/Check";
import { PropTypes } from "prop-types";
import { formatJustDate } from "../../../../../utils/formatTime";

export const UserInfo = ({ userData }) => {
  return (
    <>
      <Grid
        container
        gap={SPACING.SMALL}
        direction="column"
        flex="1"
        height="100%"
        justifyContent="space-between"
      >
        <Grid display="flex">
          <Typography
            variant="body1"
            mr={SPACING.TINY}
            color={(prop) => prop.palette.grey["A700"]}
          >
            نام کامل:
          </Typography>
          <Typography mr={SPACING.TINY} fontWeight="bold">
            {userData.fullname}
          </Typography>{" "}
        </Grid>

        <Grid display="flex">
          <Typography
            variant="body1"
            mr={SPACING.TINY}
            color={(prop) => prop.palette.grey["A700"]}
          >
            موبایل:
          </Typography>
          <Typography mr={SPACING.TINY} fontWeight="bold">
            {userData.mobile}
          </Typography>
        </Grid>

        <Grid display="flex">
          <Typography
            variant="body1"
            mr={SPACING.TINY}
            color={(prop) => prop.palette.grey["A700"]}
          >
            استان:
          </Typography>
          <Typography mr={SPACING.TINY} fontWeight="bold">
            {userData.province}
          </Typography>{" "}
        </Grid>

        <Grid display="flex">
          <Typography
            variant="body1"
            mr={SPACING.TINY}
            color={(prop) => prop.palette.grey["A700"]}
          >
            شهر:
          </Typography>
          <Typography mr={SPACING.TINY} fontWeight="bold">
            {userData.city}
          </Typography>
        </Grid>

        <Grid display="flex">
          <Typography
            variant="body1"
            mr={SPACING.TINY}
            color={(prop) => prop.palette.grey["A700"]}
          >
            تاریخ تولد:
          </Typography>
          <Typography mr={SPACING.TINY} fontWeight="bold">
            {formatJustDate(userData?.birthday)}
          </Typography>
        </Grid>
        {userData?.role.length > 0 && (
          <Grid display="flex">
            <Typography
              variant="body1"
              mr={SPACING.TINY}
              color={(prop) => prop.palette.grey["A700"]}
            >
              {userData?.role?.length > 1 ? "نقش ها:" : "نقش:"}
            </Typography>

            <Typography mr={SPACING.TINY} fontWeight="bold">
              {userData?.role?.map((item, i) => {
                var name = "";
                switch (item) {
                  case "ProvinceOperator":
                    name = "اپراتور تخصیص استان";
                    break;
                  case "CityOperator":
                    name = "اپراتور شهرستان";
                    break;
                  case "KillHouseVet":
                    name = "دامپزشک کشتارگاه";
                    break;
                  case "Poultry":
                    name = "مرغدار";
                    break;
                  case "KillHouse":
                    name = "کشتارگاه";
                    break;
                  case "VetFarm":
                    name = "دامپزشک";
                    break;
                  case "Vet":
                    name = "دامپزشک";
                    break;
                  case "ProvinceInspector":
                    name = "بازرس استان";
                    break;
                  case "ProvinceFinancial":
                    name = "اپراتور مالی";
                    break;
                  case "Driver":
                    name = "راننده";
                    break;
                  case "Admin":
                    name = "راننده";
                    break;

                  default:
                    break;
                }
                return [
                  <Grid key={i} display="flex" gap={SPACING.TINY}>
                    <CheckIcon color="primary" />
                    <Typography>{name}</Typography>
                  </Grid>,
                ];
              })}
            </Typography>
          </Grid>
        )}

        {userData?.image?.length > 5 && (
          <>
            <Grid display="flex">
              <Typography
                variant="body1"
                mr={SPACING.TINY}
                color={(prop) => prop.palette.grey["A700"]}
              >
                پروفایل:
              </Typography>
              <Grid mr={SPACING.TINY}>
                <a href={userData.image}>
                  <img
                    width="100"
                    height="100"
                    alt="img"
                    src={userData.image}
                  />
                </a>
              </Grid>
            </Grid>
          </>
        )}
      </Grid>
    </>
  );
};

UserInfo.propTypes = {
  userData: PropTypes.any,
};
