import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
import { LayoutMenu, useQuickMenu } from './Menu';
import { useLayoutStore, usePlatformStore } from './store';
import { useShallow } from 'zustand/react/shallow';
import { useEffect, useLayoutEffect, useState } from 'react';
import { LayoutUser } from './LayoutUser';
import PandaPNG from '@/assets/panda.jpg';
import QRCodePNG from '@/assets/qrcode-8x8.jpg';
import clsx from 'clsx';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useNavigate, useLocation } from '@tanstack/react-router';
import { QrCode } from 'lucide-react';
export const IconButton = (props: any) => {
  return (
    <div
      className={clsx(
        'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-slate-100 disabled:opacity-50 disabled:pointer-events-none',
        props.className,
      )}
      {...props}>
      {props.children}
    </div>
  );
};

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,
      };
    }),
  );
  const navigate = useNavigate();
  const location = useLocation();
  const platformStore = usePlatformStore(
    useShallow((state) => {
      return {
        isMac: state.isMac,
        mount: state.mount,
        isElectron: state.isElectron,
        init: state.init,
      };
    }),
  );
  const { isMac, mount, isElectron } = platformStore;
  const quickMenu = useQuickMenu();

  useLayoutEffect(() => {
    platformStore.init();
    console.log('menuStore', menuStore.me);
  }, []);

  return (
    <div className='flex gap-2 text-lg w-full h-12 items-center'>
      <div
        className={clsx('layout-menu items-center bg-gray-200 w-full h-full', !mount && 'invisible!')}
        style={{
          cursor: isElectron ? 'move' : 'default',
        }}>
        <div className='flex grow justify-between pl-4 py-2 items-center '>
          <div className='flex items-center gap-2'>
            <div className='text-xl font-bold '>{props.title}</div>
            <div className='flex items-center gap-2 text-sm '>
              {quickMenu.map((item, index) => {
                const isActive = location.pathname === item.link;
                return (
                  <div
                    key={index}
                    className={clsx('flex items-center gap-2 px-1', isActive && 'border border-white')}
                    onClick={() => {
                      console.log('navigate to', item.link);
                      navigate({ to: item.link })
                    }}>
                    <Tooltip>
                      <TooltipTrigger >
                        <div className='cursor-pointer'>{item.icon}</div>
                      </TooltipTrigger>
                      <TooltipContent>{item.title}</TooltipContent>
                    </Tooltip>
                  </div>
                );
              })}
            </div>
          </div>
          <div className='mr-4 flex gap-4 items-center no-drag'>
            <div className='group relative'>
              <IconButton>
                <QrCode size={16} />
              </IconButton>

              <div className='absolute hidden group-hover:flex bg-white p-2 border shadow-md top-10 -left-15 w-40 z-[9999] flex-col items-center justify-center rounded-md'>
                <img src={QRCodePNG} alt='QR Code' />
                <div className='text-sm text-black'>逸闻设计</div>
              </div>
            </div>

            {menuStore.me?.type === 'org' && (
              <div>
                <Tooltip>
                  <TooltipTrigger>
                    <IconButton
                      onClick={() => {
                        menuStore.switchOrg('');
                      }}>
                      <SwapOutlined />
                    </IconButton>
                  </TooltipTrigger>
                  <TooltipContent>Switch To User</TooltipContent>
                </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>
      <LayoutUser />
    </div>
  );
};