import GlitchAvatar from '@/components/glitch-avatar';
import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
import { useCurrentTournament } from '@/features/tournaments/queries';
import { AppShell, Flex, Paper, em, Title, Stack } from '@mantine/core';
import { useMediaQuery, useViewportSize } from '@mantine/hooks';
import { TrophyIcon } from '@phosphor-icons/react';
import { PropsWithChildren } from 'react';

const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  const isMobile = useMediaQuery(`(max-width: ${em(450)})`);
  const visualViewport = useVisualViewportSize();
  const viewport = useViewportSize();
  const { data: tournament } = useCurrentTournament();
  
  return (
    <AppShell>
      <AppShell.Main h='100%' style={{ overflow: 'scroll' }}>
        <Flex
          w={isMobile ? '100vw' : em(450)}
          justify='center'
          align='center'
          h='auto'
          direction='column'
          gap='md'
          mx='auto'
          pt={viewport.height === visualViewport.height ? '5rem' : '12.5rem'}
          style={{ transition: 'padding-top 0.1s ease' }}
        >
          <Paper
            shadow='none'
            p='md'
            w='100%'
            maw='375px'
            radius='md'
          >
            <Stack align='center' gap='xs' mb='md'>
              <GlitchAvatar
                name={tournament.name}
                contain
                src={
                  tournament.logo
                    ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
                    : undefined
                }
                glitchSrc={
                  tournament.glitch_logo
                    ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
                    : undefined
                }
                radius="md"
                size={250}
                px="xs"
                withBorder={false}
              >
                <TrophyIcon size={32} />
              </GlitchAvatar>
              <Title order={1} ta='center'>Welcome to FLXN</Title>
            </Stack>
            {children}
          </Paper>
        </Flex>
      </AppShell.Main>
    </AppShell>
  );
};

export default Layout;