import React from 'react'
import { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import "./Estilo/Toggle.css"

const ToggleSidebar = ({ perfil, items, defaultOpen = false }) => {
  const [isOpen, setOpen] = useState(defaultOpen)
  const [openSubmenu, setOpenSubmenu] = useState(null)
  const [activeLink, setActiveLink] = useState('')
  const location = useLocation()

  useEffect(() => {
    const currentPath = location.pathname
    setActiveLink(currentPath)
    
    const findActiveSubmenu = () => {
      for (let item of items) {
        if (item.submenu) {
          const activeSubItem = item.submenu.find(subItem => 
            subItem.url === currentPath
          )
          if (activeSubItem) {
            setOpenSubmenu(item.key)
            return
          }
        } else if (item.url === currentPath) {
          setActiveLink(currentPath)
        }
      }
    }
    
    findActiveSubmenu()
  }, [location.pathname, items])

  const OpenClose = () => {
    setOpen(!isOpen)
  }

  const handleSubmenuClick = (key) => {
    setOpenSubmenu(openSubmenu === key ? null : key)
  }

  const isLinkActive = (url) => {
    return activeLink === url
  }

  const renderLink = (item, isSubmenu = false) => {
    const isActive = isLinkActive(item.url)
    const linkClass = `sidebar-link ${isActive ? 'active' : ''} ${isSubmenu ? 'submenu-link' : ''}`

    if (item.url && item.url.startsWith("/")) {
      return (
        <Link 
          to={item.url} 
          className={linkClass}
          onClick={() => !isSubmenu && setActiveLink(item.url)}
        >
          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
          <span>{item.name}</span>
          {isActive && <div className="active-indicator"></div>}
        </Link>
      )
    }
    
    return (
      <a 
        href={item.url} 
        className={linkClass}
        target="_blank" 
        rel="noopener noreferrer"
      >
        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
        <span>{item.name}</span>
        <i className="bi bi-box-arrow-up-right external-icon"></i>
      </a>
    )
  }

  return (
    <div className="toggle-sidebar-wrapper">
      <div className='container-title' onClick={OpenClose}>
        <p className='toggle-title'>{perfil}</p>
        {isOpen
          ? <i className="bi bi-caret-down-fill toggle-arrow"></i>
          : <i className="bi bi-caret-right-fill toggle-arrow"></i>
        }
      </div>

      {isOpen && (
        <ul className='sidebar-menu-list'>
          {items.map((item, index) => {
            if (item.isTitle) {
              return (
                <li key={`title-${index}`} className="sidebar-title">
                  <span>{item.name}</span>
                </li>
              )
            }

            if (item.submenu) {
              const isSubmenuActive = openSubmenu === item.key
              return (
                <li
                  key={item.key || index}
                  className={`sidebar-item has-sub ${isSubmenuActive ? "active" : ""}`}
                >
                  <button
                    type="button"
                    className={`sidebar-link btn ${isSubmenuActive ? "submenu-active" : ""}`}
                    onClick={() => handleSubmenuClick(item.key)}
                  >
                    <i className={`bi bi-${item.icon}`}></i>
                    <span>{item.name}</span>
                  </button>

                  <ul className={`submenu ${isSubmenuActive ? "active" : ""}`}>
                    {item.submenu.map((subItem, subIndex) => (
                      <li key={subIndex} className="submenu-item">
                        {renderLink(subItem, true)}
                      </li>
                    ))}
                  </ul>
                </li>
              )
            }

            return (
              <li key={item.key || index} className="sidebar-item">
                {renderLink(item)}
              </li>
            )
          })}
        </ul>
      )}
    </div>
  )
}

export default ToggleSidebar