import { Button, Stack } from '@chakra-ui/react';
import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
import React from 'react';
import { useAuth } from '../hooks/auth';

const TanStackRouterDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import('@tanstack/router-devtools').then(res => ({
          default: res.TanStackRouterDevtools
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        }))
      );

export const Route = createRootRoute({
  component: () => {
    const { isAuthenticated, logout } = useAuth();
    return (
      <Stack padding={3}>
        <Stack flexDirection={'row'} justifyContent={'space-between'}>
          <Link to="/">
            <Button>Home</Button>
          </Link>

          <Stack flexDirection={'row'}>
            {!isAuthenticated ? (
              <>
                <Link to="/login">
                  <Button>Sign in</Button>
                </Link>
                <Link to="/register">
                  <Button>Sign up</Button>
                </Link>
              </>
            ) : (
              <Button onClick={async () => logout()}>Log out</Button>
            )}
          </Stack>
        </Stack>
        <hr style={{ padding: '4px' }} />
        <Outlet />
        <TanStackRouterDevtools />
      </Stack>
    );
  }
});