import { useShallow } from 'zustand/react/shallow';
import { useLayoutStore } from './store';
import clsx from 'clsx';
import { Button, Dropdown } from 'antd';
import { message } from '@/modules/message';
import {
  CloseOutlined,
  CodeOutlined,
  DashboardOutlined,
  HomeOutlined,
  LogoutOutlined,
  MessageOutlined,
  ReadOutlined,
  RocketOutlined,
  SmileOutlined,
  SwapOutlined,
  SwitcherOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { useMemo } from 'react';
import { query } from '../query';
import { useNewNavigate } from '../navicate';
const meun = [
  {
    title: 'Your profile',
    icon: <HomeOutlined />,
    link: '/user/profile',
  },
  {
    title: 'Your orgs',
    icon: <DashboardOutlined />,
    link: '/org/edit/list',
  },
  {
    title: 'Site Map',
    icon: <HomeOutlined />,
    link: '/map',
  },
];
export const LayoutUser = () => {
  const { open, setOpen, ...store } = useLayoutStore(
    useShallow((state) => ({
      open: state.openUser, //
      setOpen: state.setOpenUser,
      me: state.me,
      switchOrg: state.switchOrg,
    })),
  );
  const navigate = useNewNavigate();
  const items = useMemo(() => {
    const orgs = store.me?.orgs || [];
    return orgs.map((item) => {
      return {
        label: item,
        key: item,
        icon: <SmileOutlined />,
      };
    });
  }, [store.me]);
  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-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'>
        <div className='flex justify-between p-6 mt-4 font-bold items-center border-b'>
          User: {store.me?.username}
          <div className='flex gap-4'>
            {items.length > 0 && (
              <Dropdown
                placement='bottomRight'
                menu={{
                  items: items,
                  onClick: (item) => {
                    store.switchOrg(item.key, 'org');
                  },
                }}>
                <Button icon={<SwapOutlined />} onClick={() => {}}></Button>
              </Dropdown>
            )}
            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
          </div>
        </div>
        <div className='mt-3 font-medium'>
          {meun.map((item, index) => {
            return (
              <div
                key={index}
                className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
                onClick={() => {
                  if (item.link) {
                    navigate(item.link);
                    setOpen(false);
                  } else {
                    message.info('Coming soon');
                  }
                }}>
                <div className='mr-4'>{item.icon}</div>
                <div>{item.title}</div>
              </div>
            );
          })}
        </div>
        <div
          className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
          onClick={() => {
            query.removeToken();
            window.open('/user/login', '_self');
          }}>
          <div className='mr-4'>
            <LogoutOutlined />
          </div>
          <div>Login Out</div>
        </div>
      </div>
    </div>
  );
};