<script>
  import Header from '$lib/navigation/header.svelte';
  import Nav from '$lib/navigation/nav.svelte';
  import Loading from '$lib/navigation/loading.svelte';
  import { onMount } from 'svelte';
  import { checkAuth, logout } from '$lib/libauth';
  import LogoutButton from '$lib/navigation/LogoutButton.svelte';
  import { getApiUrl } from '$lib/scripts/upstream';

  const title = 'Register';

  let state = 'unreg';
  let isLoading = true;
  let inputValue = '';

  function handleInput(event) {
    inputValue = event.target.value;
  }

  async function request() {
    isLoading = true;
    const url = `${getApiUrl()}/api/v2/user/request`;
    const request = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: inputValue
      })
    };
    const res = await fetch(url, request);
    if (res.status == 400 || res.status == 403) {
      state = 'unauth';
    } else if (res.status == 201) {
      state = 'sent';
    } else {
      state = 'error';
    }
    isLoading = false;
  }

  onMount(async () => {
    const auth = await checkAuth();
    if (auth.uuidPresent === false) {
      state = 'unreg';
    } else if (auth.uuidPresent === true) {
      state = 'reg';
    }
    isLoading = false;
  });
</script>

<Header {title} />

<section class="content">
  {#if isLoading}
    <Loading />
  {:else if state == 'unreg'}
    <p>The staff version of OwlBoard offers several extra features:</p>
    <ul>
      <li>Access the Train Finder</li>
      <li>Access the PIS Finder</li>
      <li>More detailed departure boards:</li>
      <ul>
        <li>Non-Passenger movements</li>
        <li>Hidden platform numbers</li>
        <li>Display up to 25 services</li>
      </ul>
    </ul>
    <p>To register, you will need to enter a work email address to receive a confirmation email</p>
    <form on:submit={request}>
      <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
      <label for="checkbox">
        I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
        <input id="checkbox" type="checkbox" required />
      </label><br />
      <button type="submit">Submit</button>
    </form>
  {:else if state == 'sent'}
    <p>An email has been sent, click the link in the email to activate your profile.</p>
    <p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
    <p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
    <p>You will be able to register again using the same email address</p>
  {:else if state == 'unauth'}
    <p>The email address you entered does not belong to an authorised business.</p>
    <p>If you think this is an error, you can report an issue by <a href="/more/report">reporting an issue</a>.</p>
  {:else if state == 'error'}
    <p>There was an error processing your request.</p>
    <p>Check that the email you entered was correct or try again later.</p>
  {:else if state == 'reg'}
    <p>
      You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your
      browser.
    </p>
    <LogoutButton />
  {/if}
</section>
<Nav />

<style>
  .content {
    margin-top: 30px;
  }
  p {
    margin: 10px;
  }
  ul {
    text-align: left;
    color: white;
  }
  input {
    height: 40px;
    width: 80%;
    max-width: 375px;
    font-family: urwgothic, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-size: 20px;
    border-radius: 50px;
    border: none;
    margin-bottom: 20px;
  }
  #checkbox {
    height: 30px;
    width: 30px;
  }
  button {
    border: none;
    background-color: var(--island-bg-color);
    color: var(--main-text-color);
    width: 35%;
    height: 30px;
    border-radius: 50px;
    font-size: 18px;
  }
</style>
