import '@mantine/core/styles.css';
import 'mantine-datatable/styles.layer.css';
import '@mantine/notifications/styles.css';
import '@mantine/dates/styles.css';

import type { AppProps } from 'next/app';
import Head from 'next/head';
import { AppShell, Box, Flex, MantineProvider, rem } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import Header from '@/components/Layout/Header/Header';
import { Navbar } from '@/components/Layout/Navbar/Navbar';
import { client } from '@/lib/client/client.gen';
import { ReactQueryProvider } from '@/providers/ReactQueryProvider';
import { theme } from '@/theme';

client.setConfig({
  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api',
});
export default function App({ Component, pageProps }: AppProps) {
  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);

  return (
    <ReactQueryProvider>
      <MantineProvider theme={theme}>
        <Head>
          <title>Mantine Template</title>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
          />
          <link rel="shortcut icon" href="/favicon.svg" />
        </Head>
        <AppShell
          padding="md"
          header={{ height: '60px' }}
          navbar={{
            width: 250,
            breakpoint: 'sm',
            collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
          }}
        >
          <AppShell.Header>
            <Header
              desktopOpened={desktopOpened}
              mobileOpened={mobileOpened}
              toggleDesktop={toggleDesktop}
              toggleMobile={toggleMobile}
            />
          </AppShell.Header>
          <AppShell.Navbar>
            <Navbar />
          </AppShell.Navbar>
          <AppShell.Main
            style={{
              display: 'flex',
              flexDirection: 'column',
              height: '100dvh',
              minHeight: 0,
              overflow: 'hidden',
            }}
          >
            <Box
              style={{
                flex: 1,
                minHeight: 0,
                display: 'flex',
                flexDirection: 'column',
              }}
            >
              <Box
                style={{
                  flex: 1,
                  minHeight: 0,
                  display: 'flex',
                }}
              >
                <Component {...pageProps} />
              </Box>
            </Box>
          </AppShell.Main>
        </AppShell>
      </MantineProvider>
    </ReactQueryProvider>
  );
}
