import React from 'react'
import { mdiClose } from '@mdi/js'
import BaseIcon from './BaseIcon'
import AsideMenuList from './AsideMenuList'
import { MenuAsideItem } from '../interfaces'
import { useAppSelector } from '../stores/hooks'

type Props = {
  menu: MenuAsideItem[]
  className?: string
  onAsideLgCloseClick: () => void
}

export default function AsideMenuLayer({ menu, className = '', ...props }: Props) {
  const corners = useAppSelector((state) => state.style.corners);
  const asideStyle = useAppSelector((state) => state.style.asideStyle)
  const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
  const darkMode = useAppSelector((state) => state.style.darkMode)
  const { currentUser } = useAppSelector((state) => state.auth);

  const handleAsideLgCloseClick = (e: React.MouseEvent) => {
    e.preventDefault()
    props.onAsideLgCloseClick()
  }

  // Determine the role label (default to MERCHANT for now if not specified)
  const roleLabel = currentUser?.app_role?.name?.toUpperCase() || 'MERCHANT';

  return (
    <aside
      id='asideMenu'
      className={`${className} lg:py-2 lg:pl-2 w-64 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
    >
      <div
          className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle} ${corners} shadow-lg`}
      >
        <div
          className={`flex flex-row py-6 items-center px-6`}
        >
          <div className="flex items-center space-x-3">
              {/* SH Blue Icon Placeholder */}
              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md shadow-blue-200">
                  <span className="text-white font-bold text-xl">SH</span>
              </div>
              <div className="flex flex-col">
                  <b className="text-xl font-bold text-gray-800 dark:text-white tracking-tight leading-tight">SmartHisab</b>
                  <span className="text-[10px] font-bold text-blue-500 tracking-[0.2em] leading-none uppercase">{roleLabel}</span>
              </div>
          </div>
          <button
            className="hidden lg:inline-block xl:hidden p-3 ml-auto"
            onClick={handleAsideLgCloseClick}
          >
            <BaseIcon path={mdiClose} />
          </button>
        </div>
        
        <div
          className={`flex-1 overflow-y-auto overflow-x-hidden ${
            darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
          }`}
        >
          <AsideMenuList menu={menu} />
        </div>
      </div>
    </aside>
  )
}