import { useEffect, useState, useRef } from "react";
import '@/utils/styles/App.scss'
import { Route, Routes, useNavigate, Navigate } from 'react-router-dom';
import Home from '@/page/Home/index'
import Index from '@/page/Home/Index/index'
import User from '@/page/Home/User/index'
import Login from '@/page/Login/index'
import Meeting from '@/page/Meeting/index'
import NotFound from '@/page/NotFound/index'
import { storage } from '@/utils'
import { Spin } from "antd";
import { onInvitation } from "@/utils/package/signalr";
import JoinMeetingModal from "./components/JoinMeetingModal";

const App: React.FC = () => {
  const navigate = useNavigate();
  const joinMeetingModalRef = useRef<any>();
  const [_windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const [spinning, setSpinning] = useState(false);
  useEffect(() => {
    if (storage.getItem('user')) {
      try {
        window.electron.setMainWindowSize({
          width: 1200,
          height: 800,
        })
      } catch {

      }
      navigate('/home')
    } else {
      try {
        window.electron.setMainWindowSize({
          width: 752,
          height: 520,
          key: 'login'
        })
      } catch {

      }
      navigate('/login')
    }
    window.addEventListener('resize', handleResize);
    const originalSetItem = window.localStorage.setItem;
    window.localStorage.setItem = function (key, value) {
      originalSetItem.call(this, key, value);
      const event = new Event('customStorageChange') as any;
      event.key = key
      event.value = value
      window.dispatchEvent(event);
    };
    window.addEventListener('customStorageChange', handleCustomStorageChange);

    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('customStorageChange', handleCustomStorageChange);
    };
  }, []);
  useEffect(() => {
    onInvitation((item: any) => {
      switch (item.key) {
        case 'Invitation':
          window.electron.joinNotification({
            body: item.roomName,
            name: item.InviterName,
          })
          joinMeetingModalRef.current.changeModal(item)
          break;
      }
    })
  }, [navigate])
  const handleResize = (): void => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
    try {
      window.electron.getIsMaximized().then((res: boolean) => {
        const dom = document.getElementById('root') as HTMLElement;
        dom.style.borderRadius = res ? '0px' : '10px'
      })
    } catch { }
  };
  const handleCustomStorageChange = (e: any): void => {
    if (e.key === 'loading') {
      setSpinning(Boolean(e.value))
    }
  };


  return (
    <>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/home' element={<Home />}>
          <Route path='/home' element={<Navigate to='/home/index' />} />
          <Route path='/home/index' element={<Index />} />
          <Route path='/home/user' element={<User />} />
        </Route>
        <Route path='/login' element={<Login />} />
        <Route path='/meeting' element={<Meeting />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
      <Spin spinning={spinning} fullscreen />
      <JoinMeetingModal ref={joinMeetingModalRef} />
    </>
  )
}

export default App