import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { AbsoluteCenter, Box, Spinner } from '@chakra-ui/react';

import LayoutArm from '../../components/LayoutArm';
import authLogin from '../../keycloak';
import { URLs } from '../../__data__/urls';

interface PageProps {
  mockUser?: { name: string };
}

const Page = ({ mockUser }: PageProps) => {
  const [user, setUser] = useState(mockUser || null);

  const navigate = useNavigate();

  useEffect(() => {
    authLogin({ redirect: () => navigate(URLs.landing.url) }).then((user) =>
      setUser(user),
    );
  }, []);

  if (!user)
    return (
      <Box position='relative' height='100vh'>
        <AbsoluteCenter>
          <Spinner />
        </AbsoluteCenter>
      </Box>
    );

  return <LayoutArm />;
};

export default Page;