import { createSignal, onMount } from "solid-js";
import Spinner from "../modules/spinner";
import MainView from "./main-view";
import LoginView from "./login-view";
import UserService from "../services/user-service";

const REQUESTING = "requesting";
const LOGGED_IN = "logged-in";
const LOGGED_OUT = "logged-out";

function AuthLayerView() {
  const [status, setStatus] = createSignal(REQUESTING);
  onMount(async () => {
    let info = null;
    try {
      info = await UserService.getUserInfo();
    } catch (error) {}
    if (!info) {
      setStatus(LOGGED_OUT);
    } else {
      setStatus(LOGGED_IN);
    }
  });
  return (
    <>
      <Show when={status() === REQUESTING}>
        <div
          class="d-flex align-items-center justify-content-center"
          style="width: 100vw; height: 100vh;"
        >
          <Spinner style="width: 10em; height: 10em;" type={Spinner.GROW} />
        </div>
      </Show>
      <Show when={status() === LOGGED_OUT}>
        <LoginView onLogin={(info) => setStatus(LOGGED_IN)} />
      </Show>
      <Show when={status() === LOGGED_IN}>
        <MainView onLogout={() => setStatus(LOGGED_OUT)} />
      </Show>
    </>
  );
}

export default AuthLayerView;