import React from "react";
import { Avatar, IconButton, Tooltip, Typography, Grid } from "@mui/material";
import AccountBoxIcon from "@mui/icons-material/AccountBox";
import EmailIcon from "@mui/icons-material/Email";
import LightbulbIcon from "@mui/icons-material/Lightbulb";
import PermPhoneMsgIcon from "@mui/icons-material/PermPhoneMsg";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../lib/redux/slices/appSlice";
import {
  ROUTE_GENERAL_USER_PROFILE,
  ROUTE_GENERAL_MESSAGES,
  ROUTE_GENERAL_TRAINING,
  ROUTE_GENERAL_SUPPORT,
} from "../../../routes/routes";
import PersianDate from "persian-date";
import { SPACING } from "../../../data/spacing";

const stringAvatar = (name) => {
  if (name) {
    const nameArr = name
      ?.split(" ")
      ?.filter((item) => item)
      ?.map((item) => item[0]);
    return {
      sx: {
        bgcolor: "#353b48",
      },
      children: nameArr[0],
    };
  }
  return {};
};

export const SidebarHeader = React.memo(({ userProfile, open, onClose }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleNavigation = (route) => {
    dispatch(DRAWER({ right: false, bottom: false, content: null }));
    navigate(route);
    if (onClose) onClose();
  };

  return (
    <>
      <Grid container display="flex" gap={SPACING.SMALL}>
        <Grid container xs={12} justifyContent="center" gap={2}>
          {userProfile?.image &&
          userProfile?.image !== "empty" &&
          userProfile?.fullname ? (
            <Avatar
              alt="User Profile"
              src={userProfile?.image}
              color="secondary"
            />
          ) : (
            <Avatar {...stringAvatar(userProfile?.fullname)} />
          )}
          {open && (
            <Grid
              container
              direction="column"
              justifyContent="center"
              alignItems="flex-start"
            >
              <Typography variant="body1">{userProfile?.fullname}</Typography>
              <Typography variant="caption" color="grey">
                موبایل: {userProfile?.mobile}
              </Typography>
            </Grid>
          )}
        </Grid>
      </Grid>

      <Grid container xs={12} justifyContent="center" gap={1}>
        <Tooltip title="پروفایل" placement="top">
          <IconButton
            color="primary"
            onClick={() => handleNavigation(ROUTE_GENERAL_USER_PROFILE)}
          >
            <AccountBoxIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="پیام های شما" placement="top">
          <IconButton
            color="primary"
            onClick={() => handleNavigation(ROUTE_GENERAL_MESSAGES)}
          >
            <EmailIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="آموزش" placement="top">
          <IconButton
            color="primary"
            onClick={() => handleNavigation(ROUTE_GENERAL_TRAINING)}
          >
            <LightbulbIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="پشتیبانی" placement="top">
          <IconButton
            color="primary"
            onClick={() => handleNavigation(ROUTE_GENERAL_SUPPORT)}
          >
            <PermPhoneMsgIcon />
          </IconButton>
        </Tooltip>
      </Grid>

      {open && (
        <Grid
          container
          alignItems="center"
          sx={{ userSelect: "none" }}
          xs={12}
          justifyContent="center"
          mb={2}
        >
          <Typography
            variant="body2"
            sx={{
              display: { xs: "none", md: "flex" },
              fontSize: "12px",
              color: "red",
              textDecoration: "none",
            }}
          >
            {new PersianDate().toLocale("fa").format("dddd DD MMMM")}
          </Typography>
        </Grid>
      )}
    </>
  );
});

SidebarHeader.displayName = "SidebarHeader";
