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 './Header.scss'

import { useForm } from 'react-hook-form';

import NotificationsOption from './NotificationsOption';

import ComunicationOptions from './ComunicationOptions';

import MobileMenu from './MobileMenu';

import MenuDrawer from './Drawer';

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}

                    />

                  )

                })}

                <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`}

                    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)} />

      <MobileMenu navLinks={menuItems} icons={ICON_OPTIONS} />

    </>

  )

}

export default Header