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: 'Mi 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