<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 { uuid } from "$lib/stores/uuid.js";

    const title = "Register";

    let state = "unreg";
    let isLoading = false;
    let inputValue = "";

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

    async function request() {
        isLoading = true;
        const url = 'https://owlboard.info/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 () => {
        if ($uuid != "null") {
            state = "reg"
        }
    })

</script>

{#if isLoading}
  <Loading />
{/if}

<Header {title} />
{#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 40 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 in the 'More' menu.</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</p>
{/if}
  <Nav />

<style>
    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(--overlay-color);
        color: white;
        width: 35%;
        height: 30px;
        border-radius: 50px;
        font-size: 18px;
    }
</style>