import { MantineProvider } from '@mantine/core';
import { useSetAtom } from 'jotai';
import { FC, useEffect } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { Outlet, useNavigation } from 'react-router';
import { getToken, tokenAtom } from '../lib/auth/client';
import { Shell } from './Shell';
import 'ol/ol.css';

export const Root: FC = () => {
  const { state } = useNavigation();
  const setToken = useSetAtom(tokenAtom);

  useEffect(() => {
    // Initialize token from localStorage on app start
    const token = getToken();
    if (token) {
      setToken(token);
    }
  }, [setToken]);

  return (
    <DndProvider backend={HTML5Backend}>
      <MantineProvider>
        <Shell>
          {state === 'loading' && (
            <div className="absolute z-100 h-full w-full flex items-center justify-center bg-white bg-opacity-60">
              <div className="flex items-center">
                <span className="mr-4 text-3xl">Loading</span>
                <svg
                  className="h-8 w-8 animate-spin text-gray-800"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    stroke-width="4"
                  ></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              </div>
            </div>
          )}
          <div
            className={
              'h-full w-full' +
              'dark:from-neutral-900 dark:to-neutral-800 dark:bg-gradient-to-br'
            }
          >
            <Outlet />
          </div>
        </Shell>
      </MantineProvider>
    </DndProvider>
  );
};
