<script lang="ts">
  import { token, user, preferences } from "../stores/auth";
  import Card from "./Card.svelte";

  let credentials: CredentialObject = {
    username: "",
    password: "",
  };

  let error: string | null = null;

  interface CredentialObject {
    username: string;
    password: string;
  }

  function prepareCredentials({
    username,
    password,
  }: CredentialObject): string {
    return btoa(`${username}:${password}`);
  }

  async function onSubmit(e: Event) {
    if (!credentials.username || !credentials.password) {
      error = "please enter your username and password";
      return;
    }
    const auth = prepareCredentials(credentials);

    const response = await fetch("http://localhost:8080/api/v1/auth", {
      method: "POST",
      headers: {
        Authorization: `Basic ${auth}`,
      },
    });

    if (response.status === 401) {
      error = "Your username or password is wrong";
      return;
    }

    if (response.ok) {
      const {
        token: apiToken,
        user: userData,
        preferences: userPreferences,
      } = await response.json();
      user.setUser(userData);
      preferences.setPreference(userPreferences);
      token.authenticate(apiToken);
    }

    error = null;
  }
</script>

<Card>
  <form class="form" on:submit|preventDefault={onSubmit}>
    <div class="form input group">
      <label for="username">Username</label>
      <input
        bind:value={credentials.username}
        id="username"
        name="username"
        type="text"
        autocomplete="username"
      />
    </div>
    <div class="form input group">
      <label for="password">Password</label>
      <input
        bind:value={credentials.password}
        id="password"
        name="password"
        type="password"
        autocomplete="current-password"
      />
    </div>
    {#if error}
      <p class="error">{error}</p>
    {/if}
    <button type="submit">Log in</button>
  </form>
</Card>
