import React from 'react';
import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import ProfileSection from './ProfileSection';
import { useStyles } from '../mainLayoutStyles';
import NotificationSection from './NotificationSection ';
import { useSelector } from 'react-redux';
import { CLINIC_STATUS, USER_ROLES } from '../../../constants';

function Header() {
  const theme = useTheme();
  const user = useSelector((state) => state?.login?.user);
  const classes = useStyles();

  const isBelowMD = useMediaQuery((theme) => theme.breakpoints.down('md'));

  return (
    <>
      <Box
        className={
          isBelowMD ? classes.headerMainDivMobile : classes.headerMainDiv
        }
      >
        <Typography>
          {user?.userType == USER_ROLES.SUPER_ADMIN.toLowerCase() ? null : `Welcome to ${user?.created_clinics?.[0]?.name}`}
        </Typography>
        <Box className={classes.profilDiv}>
          <NotificationSection />
          <Box
            sx={{
              zIndex:
                user?.company?.status === CLINIC_STATUS.NOT_REVIEWED ||
                user?.company?.status ===
                  CLINIC_STATUS.APPROVAL_PENDING_DOCUMENT_RESUBMITTED
                  ? theme.zIndex.modal + 1
                  : user?.company?.status === CLINIC_STATUS.APPROVED
                  ? 'auto'
                  : theme.zIndex.appBar,
            }}
          >
            <ProfileSection />
          </Box>
        </Box>
      </Box>
    </>
  );
}

export default Header;