import { AiMoudle } from '@/pages/ai-chat';
import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import { Outlet } from 'react-router-dom';
import { LayoutMenu } from './Menu';
import { useLayoutStore } from './store';
import { useShallow } from 'zustand/react/shallow';
import { useEffect } from 'react';
import { LayoutUser } from './LayoutUser';
import PandaPNG from '@/assets/panda.png';

type LayoutMainProps = {
  title?: React.ReactNode;
  children?: React.ReactNode;
};
export const LayoutMain = (props: LayoutMainProps) => {
  const menuStore = useLayoutStore(
    useShallow((state) => {
      return {
        open: state.open,
        setOpen: state.setOpen, //
        getMe: state.getMe,
        me: state.me,
        setOpenUser: state.setOpenUser,
        switchOrg: state.switchOrg,
      };
    }),
  );
  useEffect(() => {
    menuStore.getMe();
  }, []);
  return (
    <div className='flex w-full h-full flex-col relative'>
      <LayoutMenu />
      <div className='layout-menu items-center'>
        <Button
          className='mr-4'
          onClick={() => {
            menuStore.setOpen(true);
          }}
          icon={<MenuOutlined />}></Button>
        <div className='flex flex-grow justify-between'>
          {props.title}
          <div className='mr-4 flex gap-4 items-center'>
            {menuStore.me?.type === 'org' && (
              <div>
                <Tooltip title='Switch To User'>
                  <Button
                    icon={<SwapOutlined />}
                    onClick={() => {
                      menuStore.switchOrg('', 'user');
                    }}></Button>
                </Tooltip>
              </div>
            )}
            <div className='w-8 h-8 rounded-full avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
              {menuStore.me?.avatar ? (
                <img className='w-8 h-8 rounded-full' src={menuStore.me?.avatar} alt='avatar' />
              ) : (
                <img className='w-8 h-8 rounded-full' src={PandaPNG} alt='avatar' />
              )}
            </div>
            <div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
              {menuStore.me?.username}
            </div>
          </div>
        </div>
      </div>
      <div
        className='flex'
        style={{
          height: 'calc(100vh - 3rem)',
        }}>
        <div className='flex-grow overflow-hidden'>
          <div className='w-full h-full rounded-lg'>
            <Outlet />
          </div>
        </div>
        <AiMoudle />
      </div>
      <LayoutUser />
    </div>
  );
};