Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Badge, styled } from '@mui/material'

import { useOutsideClick } from '@hooks'

import ListItemDropdown from './ListItemDropdown'

import './Dropdowns.scss'
import { getAdminUrl } from '@app/services/admin'
import { useDispatch } from 'react-redux'
import { addNotification } from '@app/redux/notification/notification.actions'

const NavItem = styled(Link)(({ theme }) => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: theme.spacing(1, 0),
  fontSize: '12px',
  fontWeight: 400,
  height: '100%',
  '&::after': {
    borderBottom: '2px solid var(--font-color)',
    content: '""',
    bottom: '-1px',
    left: 0,
    position: 'absolute',
    transform: 'scaleX(0)',
    transition: 'transform 0.2s ease-in-out',
    width: '100%'
  },
  '&.active::after, &:hover::after': {
    transform: 'scaleX(1)'
  },
  [theme.breakpoints.up('lg')]: {
    minWidth: '60px'
  },
  [theme.breakpoints.down('md')]: {
    fontSize: 0
  }
}))

const NavigationItem = ({
  ajax = 0,
  url = '',
  childs = [],
  count = 0,
  onClick,
  children
}) => {
  const [displayMenu, setDisplayMenu] = useState(false)

  const navigate = useNavigate()
  const dispatch = useDispatch()

  const [menu] = useOutsideClick(() => setDisplayMenu(false))

  const toggleMenu = () => setDisplayMenu(!displayMenu)

  const openAdmin = async () => {
    try {
      const adminUrl = await getAdminUrl(url)
      window.open(adminUrl, '_blank')
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  }

  const handleClick = async (e) => {
    e.preventDefault()

    if (ajax) {
      openAdmin()
      return
    }

    if (onClick) {
      onClick()
      return
    }

    if (childs.length) {
      toggleMenu()
      return
    }

    navigate(`/${url}`)
  }

  return (
    <li ref={menu}>
      <NavItem
        to={url}
        onClick={handleClick}
        className={displayMenu ? 'active' : ''}
      >
        {children}

        <Badge
          badgeContent={count}
          color='error'
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
        />
      </NavItem>

      <ListItemDropdown
        isShow={displayMenu}
        options={childs}
        onSelect={toggleMenu}
      />
    </li>
  )
}

export default NavigationItem