import Header from '@components/Header'
import Navbar from '@components/Navbar'
import { useAuth } from '@hooks/useAuth'
import { AppShell, ScrollArea } from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { PathConstants } from '@routes/routes'
import { useEffect } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Layout() {
  const [opened, { toggle }] = useDisclosure()
  const { auth } = useAuth()
  const navigate = useNavigate()

  useEffect(() => {
    if (!auth.isLogged) {
      navigate(PathConstants.LOGIN)
    }
  }, [])

  return (
    <AppShell
      header={{ height: 60 }}
      navbar={{ width: 300, breakpoint: 'md', collapsed: { mobile: !opened } }}
      padding="md"
      bg="#f2fcff"
    >
      <AppShell.Header>
        <Header opened={opened} onClick={toggle} />
      </AppShell.Header>
      <AppShell.Navbar>
        <AppShell.Section component={ScrollArea}>
          <Navbar />
        </AppShell.Section>
      </AppShell.Navbar>
      <AppShell.Main>
        <Outlet />
      </AppShell.Main>
    </AppShell>
  )
}