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 HomeOutlined from '@ant-design/icons/HomeOutlined';
import AppstoreOutlined from '@ant-design/icons/AppstoreOutlined';
import FolderOutlined from '@ant-design/icons/FolderOutlined';
import CodeOutlined from '@ant-design/icons/CodeOutlined';
import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
import SmileOutlined from '@ant-design/icons/SmileOutlined';
import { X, Settings } from 'lucide-react';
import { useNewNavigate } from '../navicate';
import { useTranslation } from 'react-i18next';
import { Map } from 'lucide-react';
export const useQuickMenu = () => {
  const { t } = useTranslation();
  return [
    {
      title: t('Home'),
      icon: <HomeOutlined />,
      link: '/home',
    },
    {
      title: t('User App'),
      icon: <AppstoreOutlined />,
      link: '/app/edit/list',
    },
    {
      title: t('File App'),
      icon: <FolderOutlined />,
      link: '/file/edit/list',
    },
  ];
};
export const LayoutMenu = () => {
  const { t } = useTranslation();
  const meun = [
    {
      title: t('Home'),
      icon: <HomeOutlined />,
      link: '/home',
    },
    {
      title: t('User App'),
      icon: <AppstoreOutlined />,
      link: '/app/edit/list',
    },
    {
      title: t('File App'),
      icon: <FolderOutlined />,
      link: '/file/edit/list',
    },
    {
      title: t('Container'),
      icon: <CodeOutlined />,
      link: '/container/edit/list',
    },
    { title: t('Config'), icon: <Settings size={16} />, link: '/config/edit/list' },
    { title: t('Map'), icon: <Map size={16} />, link: '/map' },
    {
      title: t('About'),
      icon: <SmileOutlined />,
    },
  ];
  const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
  const navigate = useNewNavigate();
  return (
    <div className={clsx('w-full h-full text-primary 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 '>
        <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 flex items-center justify-center'>{item.icon}</div>
                <div>{item.title}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};