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 asideStyle = useAppSelector((state) => state.style.asideStyle);
  const asideScrollbarsStyle = useAppSelector(
    (state) => state.style.asideScrollbarsStyle,
  );
  const darkMode = useAppSelector((state) => state.style.darkMode);

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

  return (
    <aside
      id='asideMenu'
      className={`${className} fixed top-0 z-40 flex h-screen w-72 overflow-hidden transition-position`}
    >
      <div
        className={`flex flex-1 flex-col overflow-hidden ${asideStyle} dark:bg-dark-900`}
      >
        <div className='border-b border-slate-200 px-5 py-5'>
          <div className='flex items-start justify-between gap-3'>
            <div>
              <p className='text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700'>
                Northstar
              </p>
              <h2 className='mt-2 text-lg font-bold text-slate-950 dark:text-white'>
                Foodservice Ops
              </h2>
              <p className='mt-1 text-xs font-medium text-slate-500'>
                Supplier / Distributor B2B Portal
              </p>
            </div>
            <button
              className='hidden rounded-lg border border-slate-200 p-2 text-slate-500 hover:bg-slate-100 lg:inline-block xl:hidden'
              onClick={handleAsideLgCloseClick}
            >
              <BaseIcon path={mdiClose} />
            </button>
          </div>
        </div>

        <div
          className={`flex-1 overflow-y-auto overflow-x-hidden px-3 py-4 ${
            darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
          }`}
        >
          <AsideMenuList menu={menu} />
        </div>

        <div className='border-t border-slate-200 px-5 py-4'>
          <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
            Workspace
          </p>
          <p className='mt-1 text-sm font-semibold text-slate-700 dark:text-slate-200'>
            Contract catalog + orders
          </p>
        </div>
      </div>
    </aside>
  );
}