import { FC, PropsWithChildren } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router';
import { toast, Toaster } from 'sonner';
import { notifications } from '../demoData/notification';
import { usePreferenceStore } from '../store';
import { twx } from '../utils';
import { Header } from './Header';
import History from './History';
import { NavBar } from './NavBar';
import { NotificationCard, NotificationCenter } from './NotificationCenter';

export const Shell: FC<PropsWithChildren> = ({ children }) => {
  const navigate = useNavigate();
  // eslint-disable-next-line react-compiler/react-compiler
  History.navigate = navigate;
  const navCollapsed = usePreferenceStore.use.navCollapsed();
  const updatePreference = usePreferenceStore.use.updatePreference();

  // TODO: handle login
  // useEffect(() => {
  //   function refreshToken() {
  //     const token = localStorage.getItem('token');
  //     if (!token) return navigate('/login');
  //   }
  //   refreshToken();
  //   const intervalId = setInterval(() => {
  //     refreshToken();
  //   }, 1800000);

  //   return () => clearInterval(intervalId);
  // }, [navigate]);

  useHotkeys('shift+z', () => {
    toast.custom((t) => (
      <NotificationCard
        {...notifications[0]}
        onClose={() => toast.dismiss(t)}
      />
    ));
  });

  useHotkeys('shift+x', () => {
    toast.custom((t) => (
      <NotificationCard
        {...notifications[1]}
        onClose={() => toast.dismiss(t)}
      />
    ));
  });

  return (
    <div className="relative h-screen flex flex-col overflow-hidden bg-zinc-100 dark:bg-zinc-800">
      <Toaster
        style={{ zIndex: 50, top: 60, right: 10, width: '28rem' }}
        toastOptions={{
          style: {
            width: '28rem',
          },
        }}
        position="top-right"
        expand={true}
        richColors
      />
      <NavBar />
      <Header />
      <NotificationCenter />
      <main
        className={twx([
          navCollapsed ? '' : 'lg:ml-60',
          'ml-16 relative box-border flex-1 overflow-auto transition-all bg-zinc-100 dark:bg-zinc-700',
        ])}
      >
        <div
          className={twx(
            'pointer-events-auto absolute top-0 z-10 h-full w-full bg-black/40 lg:hidden',
            navCollapsed && 'contents',
          )}
          onClick={() => {
            updatePreference({ navCollapsed: true });
          }}
        />
        {children}
      </main>
    </div>
  );
};
