Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import * as React from 'react'
import Box from '@mui/material/Box'
import Drawer from '@mui/material/Drawer'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import Accordion from '@mui/material/Accordion'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'
import Link from '@mui/material/Link'
import Typography from '@mui/material/Typography'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import AccountTreeRoundedIcon from '@mui/icons-material/AccountTreeRounded'
import { axios } from '../../../utils'

function MenuDrawer({
  isOpen = false,
  items = [],
  icons = [],
  closeDrawer = () => {},
}) {
  return (
    <Drawer anchor="right" open={isOpen} onClose={closeDrawer}>
      <Box sx={{ width: 250 }} role="presentation">
        <List>
          {items.map((navItem, index) => {
            return (
              <MenuDrawer.Item
                key={index}
                Icon={icons[index]}
                title={navItem.label}
                url={navItem.href}
                childs={navItem.childs}
                ajaxRequest={navItem.ajax}
              />
            )
          })}
        </List>
      </Box>
    </Drawer>
  )
}

const Item = ({ Icon, title, url, childs = [], ajaxRequest }) => {
  const handleAjaxRequest = async () => {
    try {
      const { data } = await axios.get(url)
      if (data.success) {
        window.open(data.data, 'backend')
      }
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  return (
    <ListItem disablePadding>
      {!childs.length ? (
        <Link
          href={`/${url}`}
          display="flex"
          gap=".5rem"
          paddingLeft="1rem"
          onClick={(e) => {
            if (ajaxRequest) {
              e.preventDefault()
              handleAjaxRequest()
            }
          }}
        >
          <ListItemIcon>{Icon && <Icon />}</ListItemIcon>
          <ListItemText primary={title} />
        </Link>
      ) : (
        <Accordion sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            sx={{
              minHeight: 'auto !important',
              margin: '0',
              padding: 0,
              paddingLeft: '1rem',
            }}
          >
            {Icon && <Icon />}
            <Typography margin="0">{title}</Typography>
          </AccordionSummary>
          <AccordionDetails sx={{ padding: 0 }}>
            {childs.map((child, index) => {
              if (child.childs?.length) {
                return (
                  <Accordion
                    key={index}
                    sx={{
                      border: 'none',
                      width: '100%',
                      boxShadow: 'none',
                      background: 'lightgray',
                    }}
                  >
                    <AccordionSummary
                      expandIcon={<ExpandMoreIcon />}
                      sx={{ minHeight: 'auto !important', margin: '0' }}
                    >
                      <AccountTreeRoundedIcon />
                      <Typography margin="0">{child.label}</Typography>
                    </AccordionSummary>
                    <AccordionDetails sx={{ padding: '0 16px' }}>
                      {child.childs.map((levelThree, index) => {
                        return (
                          <Link key={index} href={`/${levelThree.href}`}>
                            <ListItemText primary={levelThree.label} />
                          </Link>
                        )
                      })}
                    </AccordionDetails>
                  </Accordion>
                )
              }
              return (
                <Link
                  key={index}
                  href={child.href[0] === '/' ? child.href : `/${child.href}`}
                >
                  <ListItemText
                    primary={child.label}
                    sx={{ padding: '0 16px' }}
                  />
                </Link>
              )
            })}
          </AccordionDetails>
        </Accordion>
      )}
    </ListItem>
  )
}

MenuDrawer.Item = Item

export default MenuDrawer