import { StorageActiveAccount } from '@pos/base';
import React from 'react';
import { useEffect } from 'react';
import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';

const AuthLayout = React.lazy(() => import('./layout'));
const Login = React.lazy(() => import('./pages/login'));

export default function Auth() {
  const navigate = useNavigate();

  async function checkAccount() {
    const activeAccount = await StorageActiveAccount.get();
    if (activeAccount) navigate('/app', { replace: true });
  }

  useEffect(() => {
    checkAccount();
  }, []);

  return (
    <React.Suspense fallback={null}>
      <AuthLayout>
        <Routes>
          <Route path="/" element={<Navigate replace to={'/auth/login'} />} />
          <Route path="/login" element={<Login />} />
          <Route path="/*" element={<Navigate to="/404" />} />
        </Routes>
      </AuthLayout>
    </React.Suspense>
    // <div>
    //   <div style={{ fontSize: 30 }}>HELLO</div>
    //   <div style={{ fontFamily: `'Paytone One', sans-serif`, fontSize: 40 }}>Welcome Team!</div>
    //   <div style={{ fontSize: 18 }}>{`Smile... it's a beautiful day.`} </div>
    // </div>
  );
}