Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import { axios, useWindowSize } from '../../../utils'
import { useForm } from 'react-hook-form'

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 ChatIcon from '@mui/icons-material/Chat'
import MenuIcon from '@mui/icons-material/Menu'
import SchoolIcon from '@mui/icons-material/School'

import HeaderOptions from './HeaderOptions'
import UserOptions from './UserOptions'

import './Header.scss'
let MenuDrawer

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

const Header = ({
  menu,
  image = '',
  logoForNavbar = '',
  fullName,
  linkAdmin,
  linkImpersonate,
  linkKnowledgeArea,
  routeKnowledgeArea,
  // companyVars,
  // isChatPage,
  routeCheckSession,
  defaultNetwork,
}) => {
  const [menuItems, setMenuItems] = useState(menu || [])
  const [notificationsCount, setNotificationsCount] = useState(0)
  const [aditionalItems, setAditionalItems] = useState([])
  const [messagesCount, setMessagesCount] = useState(0)
  const [userImage, setUserImage] = useState(image)

  const [showMobileSearch, setShowMobileSearch] = useState(false)
  const [showDrawer, setShowDrawer] = useState(false)
  const [loading, setLoading] = useState(false)

  const [innerWidth] = useWindowSize()

  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 checkSession = async () => {
    try {
      setLoading(true)
      const { data: response } = await axios.get(routeCheckSession)
      const { total_messages, total_notifications } = response.data

      if (response.success) {
        setMessagesCount(Number(total_messages))
        setNotificationsCount(Number(total_notifications))
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }

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

  const getKnowledgeRoutes = () => {
    const childs = [{ label: 'My Coach', href: '/my-coach' }]
    if (linkKnowledgeArea) {
      childs.push({
        label: 'Área de conocimiento',
        href: routeKnowledgeArea,
      })
    }
    return childs
  }

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

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

  useEffect(() => {
    if (innerWidth < 992) {
      MenuDrawer = React.lazy(() => import('./Drawer'))
    }
  }, [innerWidth])

  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 px-0">
          <div className="header__nav">
            <div className={`header__left ${showMobileSearch && 'show'}`}>
              <a href="/">
                <img src={logoForNavbar} alt="Logo" />
              </a>

              <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}
                    />
                  )
                })}
                <HeaderOptions
                  Icon={SchoolIcon}
                  title="Conocimiento"
                  url={routeKnowledgeArea}
                  childs={getKnowledgeRoutes()}
                />
                <HeaderOptions
                  Icon={ChatIcon}
                  title="Comunicación"
                  badgeCount={notificationsCount || messagesCount}
                  childs={[
                    ...aditionalItems,
                    { label: 'Inmail', href: '/inmail', count: messagesCount },
                    { label: 'Chat', href: '/chat' },
                    {
                      label: 'Notificaciones',
                      href: '/notifications',
                      count: notificationsCount,
                    },
                  ]}
                  isMobile={true}
                />
                <UserOptions
                  image={userImage}
                  name={fullName}
                  adminUrl={linkAdmin}
                  impersonateUrl={linkImpersonate}
                  defaultNetwork={defaultNetwork}
                  knowledgeAuth={linkKnowledgeArea}
                  routeKnowledge={routeKnowledgeArea}
                />
                {MenuDrawer && (
                  <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 && (
        <React.Suspense fallback={null}>
          <MenuDrawer
            items={[
              ...menuItems,
              {
                label: 'Conocimiento',
                href: 'Conocimiento',
                img: '/images/navbar/market-place.svg',
                ajax: 0,
                childs: getKnowledgeRoutes(),
              },
            ]}
            icons={ICON_OPTIONS}
            isOpen={showDrawer}
            closeDrawer={() => setShowDrawer(false)}
          />
        </React.Suspense>
      )}
    </>
  )
}

export default Header