import { AppShell, Box, Button } from '@mantine/core';
import { useCallback, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
import { me } from '../apis/auth';
import { Logo, UserMenu } from '../components';
import Links from '../system/links';
export default function PrivateLayout() {
    const navigate = useNavigate();

    const location = useLocation();

    const checkAuth = useCallback(async () => {
        const data = await me();

        if (!data || !data.data) {
            navigate(Links.LOGIN);
        }
    }, [navigate]);

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

    return (
        <AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: true, desktop: true } }} padding="md">
            <AppShell.Header>
                <Box className="flex items-center justify-between h-full px-4">
                    <Logo />

                    <Box className="flex items-center gap-4">
                        {Links.MENUS.filter((i) => i.show).map((menu, index) => (
                            <Button
                                size="xs"
                                component={Link}
                                className="rounded-sm"
                                key={menu.path + index}
                                to={menu.path}
                                // label={menu.title}
                                variant={location.pathname === menu.path ? 'filled' : 'outline'}
                                leftSection={<menu.icon size={16} stroke={1.5} />}
                            >
                                {menu.title}
                            </Button>
                        ))}
                    </Box>

                    <UserMenu />
                </Box>
            </AppShell.Header>
            {/* <AppShell.Navbar px={'md'} pb={'md'}>
                <AppShell.Section grow my="md" component={ScrollArea}>
                    <div className="w-full h-full flex flex-col gap-3">
                        {Links.MENUS.map((menu, index) => (
                            <NavLink
                                component={Link}
                                className="rounded-sm"
                                key={menu.path + index}
                                to={menu.path}
                                label={menu.title}
                                active={location.pathname === menu.path}
                                leftSection={<menu.icon size={16} stroke={1.5} />}
                            />
                        ))}
                    </div>
                </AppShell.Section>
                <AppShell.Section className="text-xs text-center">{new Date().getFullYear()}</AppShell.Section>
            </AppShell.Navbar> */}
            <AppShell.Main>
                <Outlet />
            </AppShell.Main>
        </AppShell>
    );
}
