Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import SearchIcon from '@mui/icons-material/Search'
import HomeIcon from '@mui/icons-material/Home'
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
import SellIcon from '@mui/icons-material/Sell';
import PeopleIcon from '@mui/icons-material/People';
import GroupsIcon from '@mui/icons-material/Groups';
import HeaderOptions from './HeaderOptions'
import ChatIcon from '@mui/icons-material/Chat'
import NotificationsIcon from '@mui/icons-material/Notifications'
import MenuIcon from '@mui/icons-material/Menu'
import UserOptions from './UserOptions'
import { useForm } from 'react-hook-form';
import NotificationsOption from './NotificationsOption';
import ComunicationOptions from './ComunicationOptions';
import MenuDrawer from './Drawer';

import './Header.scss'

const ICON_OPTIONS = [
  HomeIcon,
  PeopleIcon,
  BusinessCenterIcon,
  GroupsIcon,
  SellIcon,
]

const Header = ({
  menu,
  image = '',
  logoForNavbar = '',
  fullName,
  linkAdmin,
  linkImpersonate,
  //companyVars,
  //isChatPage,
  routeCheckSession,
}) => {
  const [menuItems, setMenuItems] = useState(menu || [])
  const [aditionalItems, setAditionalItems] = useState([])
  const [userImage, setUserImage] = useState(image)
  const [showMobileSearch, setShowMobileSearch] = useState(false)
  const [showDrawer, setShowDrawer] = useState(false)
  const [loading, setLoading] = useState(false);
  const searchInput = useRef(null);

  const { handleSubmit, register } = useForm()
  const handleOnSubmit = (data) => window.location.replace(`/search/entity/user?keyword=${data.keyword}`)

  const checkUserImage = async () => {
    setLoading(true);
    const session_image = sessionStorage.getItem('user_session_image')
    if (session_image) {
      await setUserImage(session_image)
      sessionStorage.removeItem('user_session_image')
    }
    setLoading(false);
  }

  const handleDisplayMobileSearch = () => {
    if (window.innerWidth < 992) {
      setShowMobileSearch(true)
    }
  }

  useEffect(() => {
    let timer;
    if (!loading) {
      timer = setTimeout(() => checkUserImage(), 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [loading])

  useEffect(() => {
    if (menu.length > 5) {
      setMenuItems(menu.splice(0, 5))
      setAditionalItems(menu.splice(menu.length - 5))
    }
  }, [])

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (searchInput?.current && !searchInput?.current?.contains(event.target)) {
        setShowMobileSearch(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [searchInput]);

  return (
    <>
      <div className='header'>
        <div className='container'>
          <div className='header__nav'>

            <div className='header__left'>
              <img src={logoForNavbar} alt='Logo' />
              <form
                className={`header__search show`}
                onClick={handleDisplayMobileSearch}
                onSubmit={handleSubmit(handleOnSubmit)}
                ref={searchInput}
              >
                <SearchIcon />
                <input
                  type='text'
                  placeholder='Search'
                  name='keyword'
                  ref={register}
                />
              </form>
            </div>

            <nav className={`header__right ${showMobileSearch && 'd-none'}`}>
              <ul>
                {menuItems.map((item, index) => {
                  return (
                    <HeaderOptions
                      key={index}
                      Icon={ICON_OPTIONS[index]}
                      title={item.label}
                      url={item.href}
                      childs={item.childs}
                      ajaxRequest={item.ajax}
                    />
                  )
                })}
                <NotificationsOption
                  Icon={NotificationsIcon}
                  title='Notificaciones'
                  url='/notifications'
                  sessionLink={routeCheckSession}
                />
                <ComunicationOptions
                  sessionLink={routeCheckSession}
                  Icon={ChatIcon}
                  title='Comunicación'
                  url=''
                  childs={[
                    ...aditionalItems,
                    { label: 'Inmail', href: '/inmail' },
                    { label: 'Chat', href: '/chat' }
                  ]}
                />
                <UserOptions
                  image={userImage}
                  name={fullName}
                  adminUrl={linkAdmin}
                  impersonateUrl={linkImpersonate}
                />
                <li className='d-md-none'>
                  <a
                    href='/'
                    className={`header__option mobile`}
                    onClick={(e) => {
                      e.preventDefault()
                      setShowDrawer(!showDrawer)
                    }}
                  >
                    <MenuIcon />
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <MenuDrawer items={menuItems} icons={ICON_OPTIONS} isOpen={showDrawer} closeDrawer={() => setShowDrawer(false)} />
    </>
  )
}

export default Header