import { useShallow } from 'zustand/react/shallow';
import { useLayoutStore } from './store';
import clsx from 'clsx';
import { Button } from '@mui/material';
import { message } from '@/modules/message';
import {
  AppstoreOutlined,
  CloseOutlined,
  CodeOutlined,
  DashboardOutlined,
  FolderOutlined,
  HomeOutlined,
  MessageOutlined,
  ReadOutlined,
  RocketOutlined,
  SmileOutlined,
  SwitcherOutlined,
} from '@ant-design/icons';
import { X } from 'lucide-react';
import { useNewNavigate } from '../navicate';
const meun = [
  {
    title: 'Home',
    icon: <HomeOutlined />,
    link: '/map',
  },
  {
    title: 'User App',
    icon: <AppstoreOutlined />,
    link: '/app/edit/list',
  },
  {
    title: 'File App',
    icon: <FolderOutlined />,
    link: '/file/edit/list',
  },
  {
    title: 'Container',
    icon: <CodeOutlined />,
    link: '/container/edit/list',
  },
  {
    title: 'Org',
    icon: <SwitcherOutlined />,
    link: '/org/edit/list',
  },
  {
    title: 'About',
    icon: <SmileOutlined />,
  },
];
export const LayoutMenu = () => {
  const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
  const navigate = useNewNavigate();
  return (
    <div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}>
      <div
        className='bg-white w-full absolute h-full opacity-60 z-0'
        onClick={() => {
          setOpen(false);
        }}></div>
      <div className='w-[300px] h-full absolute top-0 left-0 bg-amber-900 text-primary'>
        <div className='flex justify-between p-6 mt-4 font-bold items-center'>
          Envision Center
          <div>
            <Button onClick={() => setOpen(false)}>
              <X />
            </Button>
          </div>
        </div>
        <div className='mt-3 font-medium'>
          {meun.map((item, index) => {
            return (
              <div
                key={index}
                className='flex items-center p-4 gap-3 cursor-pointer hover:bg-secondary hover:text-white rounded-md'
                onClick={() => {
                  if (item.link) navigate(`${item.link}`);
                  else {
                    message.info('About Envision Center');
                  }
                  setOpen(false);
                }}>
                <div className='w-6 h-6'>{item.icon}</div>
                <div>{item.title}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};