Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppBar, Box, Container, Toolbar } from '@mui/material'
import {
  Menu,
  Chat,
  Home,
  Sell,
  School,
  People,
  Groups,
  BusinessCenter,
  Search
} from '@mui/icons-material'

import { useNavbar } from '@hooks'

import MenuDrawer from './Drawer'
import NavigationItem from './navigation-item'
import UserOptions from './user-options'
import Input from '@components/UI/inputs/Input'

export default function Navbar() {
  const { menuData, totalMessages, totalNotifications } = useNavbar()

  const {
    menu = [],
    image = '',
    fullName,
    linkAdmin,
    linkImpersonate,
    linkKnowledgeArea,
    routeKnowledgeArea,
    routeAbuseReport,
    urlImpersonate,
    urlAdmin,
    defaultNetwork
  } = menuData

  const [showDrawer, setShowDrawer] = useState(false)
  const logo = useSelector(({ auth }) => auth.navbar_url)
  const labels = useSelector(({ intl }) => intl.labels)
  const navigate = useNavigate()
  const userAgent = navigator.userAgent
  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent)

  const ICON_OPTIONS = [
    Home,
    People,
    BusinessCenter,
    Groups,
    Sell,
    Chat,
    School
  ]

  const handleSearch = ({ key, target }) => {
    if (key !== 'Enter') {
      return
    }

    navigate(`/search/entity/user?keyword=${target.value}`)
    target.value = ''
    target.blur()
  }

  return (
    <>
      <AppBar
        sx={{
          position: 'sticky',
          paddingTop: isIphone ? '50px' : '0',
          boxShadow: 'none',
          borderBottom: '1px solid var(--border-primary)'
        }}
      >
        <Container>
          <Toolbar
            sx={{
              gap: 2,
              minHeight: 'none',
              paddingLeft: 0,
              paddingRight: 0
            }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: { xs: 0, md: 2 },
                flexGrow: 1,
                '& img': {
                  display: { xs: 'none', md: 'block' },
                  height: { xs: '50px', md: '60px' },
                  width: { xs: '50px', md: '60px' }
                }
              }}
            >
              <Link to='/'>
                <img src={logo} alt='Logo' />
              </Link>
              <Input
                placeholder={labels.search}
                icon={<Search />}
                variant='search'
                onKeyDown={handleSearch}
              />
            </Box>

            <Box
              sx={{
                alignItems: 'center',
                display: 'flex',
                '& > ul': {
                  display: 'flex',
                  flex: 1,
                  justifyContent: 'space-evenly',
                  gap: { xs: 1, md: 2 },
                  '& > li': {
                    position: 'relative',
                    display: 'flex',
                    '&:not(:nth-last-child(-n + 4))': {
                      display: { xs: 'none', md: 'flex' }
                    },
                    '&:nth-last-child(-n + 1)': {
                      display: { xs: 'flex', md: 'none' }
                    }
                  }
                }
              }}
            >
              <ul>
                {menu.map(({ label, href, childs, ajax }, index) => {
                  const totalCount = totalNotifications + totalMessages
                  const Icon = ICON_OPTIONS[index]

                  return (
                    <NavigationItem
                      key={index}
                      url={href}
                      childs={childs}
                      count={label === 'Comunicación' ? totalCount : 0}
                    >
                      <Icon />
                      {label}
                    </NavigationItem>
                  )
                })}

                <UserOptions
                  image={image}
                  name={fullName}
                  adminUrl={linkAdmin}
                  impersonateUrl={linkImpersonate}
                  defaultNetwork={defaultNetwork}
                  knowledgeAuth={linkKnowledgeArea}
                  routeKnowledge={routeKnowledgeArea}
                  routeAdmin={urlAdmin}
                  routeImpersonate={urlImpersonate}
                  routeAbuseReport={routeAbuseReport}
                />

                <NavigationItem onClick={() => setShowDrawer(!showDrawer)}>
                  <Menu />
                </NavigationItem>
              </ul>
            </Box>
          </Toolbar>
        </Container>
      </AppBar>

      <MenuDrawer
        items={menu}
        icons={ICON_OPTIONS}
        isOpen={showDrawer}
        closeDrawer={() => setShowDrawer(false)}
      />
    </>
  )
}