import { AppShell, ScrollArea, Stack, Group, Paper, useMantineColorScheme } from "@mantine/core";
import { Link } from "@tanstack/react-router";
import { NavLink } from "./nav-link";
import { useIsMobile } from "@/hooks/use-is-mobile";
import { useAuth } from  "@/contexts/auth-context";
import { useLinks } from "../hooks/use-links";
import { memo } from "react";

const Navbar = () => {
  const { user, roles } = useAuth()
  const isMobile = useIsMobile();
  const { colorScheme } = useMantineColorScheme();

  const links = useLinks(user?.id, roles);

  const isDark = colorScheme === 'dark';
  const borderColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
  const boxShadowColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
  //  boxShadow: `5px 5px ${boxShadowColor}`, borderColor

  if (isMobile) return (
    <Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1rem)' pos='fixed' m='0.5rem' bottom='0' style={{ zIndex: 10 }}>
      <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>
        {links.map((link) => (
          <NavLink key={link.href} {...link} />
        ))}
      </Group>
    </Paper>
  )

  return <AppShell.Navbar p="xs" role='navigation'>
    <AppShell.Section grow component={ScrollArea}>
      <Stack gap='xs' mx='auto' w='fit-content' justify='end' mt='md'>
        {links.map((link) => (
          <NavLink key={link.href} {...link} />
        ))}
      </Stack>
    </AppShell.Section>
  </AppShell.Navbar>
}

export default memo(Navbar);