<script lang="ts">
  import { fly } from 'svelte/transition'
  import i18n from '$lib/i18n'
  import axios from '$lib/axios.svelte'
  import { persistentSettings } from '$lib/persistent-store'
  import { goto } from '$app/navigation'
  $i18n.loadNamespaces('login')

  const urlParams = new URLSearchParams(window.location.search)
  const isReauth = urlParams.has('reauth')
  const isLogout = urlParams.has('logout')

  let showToast = $state(true)
  if (isReauth || isLogout) {
    setTimeout(() => {
      showToast = false
    }, 6000)
  }

  let email: string = $state('')
  let password: string = $state('')

  function login() {
    axios
      .post('/auth/login', {
        email,
        password,
      })
      .then((response) => {
        $persistentSettings.loggedIn = true
        $persistentSettings.refreshToken = response.data.refresh_token
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.access_token
        axios.get('/me').then((response) => {
          $persistentSettings.email = response.data.email
          $persistentSettings.friendlyName = response.data.friendly_name
          $persistentSettings.role = response.data.role
        })
        goto('/')
      })
      .catch((error) => {})
  }
</script>

<div class="w-full h-full flex flex-col justify-center items-center bg-base-200">
  <div class="basis-0 grow flex justify-center items-center">
    <div class="flex flex-col items-center justify-center">
      <i class="bi bi-ev-front-fill text-8xl text-primary"></i>
      <p class="text-2xl font-bold">LibreCharge</p>
    </div>
  </div>
  <div class="basis-0 flex justify-center items-center">
    <div class="card bg-base-100 w-full max-w-sm h-fit shrink-0 shadow-2xl">
      <div class="card-body">
        <h1 class="text-2xl font-bold">{$i18n.t('login:title')}</h1>
        <p class="py-2 text-base">{$i18n.t('login:text')}</p>
        <fieldset class="fieldset">
          <label class="fieldset-label input text-base-content">
            <i class="bi bi-envelope-at"></i>
            <input type="email" bind:value={email} placeholder="me@example.com" required />
          </label>
          <label class="fieldset-label input text-base-content">
            <i class="bi bi-key"></i>
            <input
              type="password"
              bind:value={password}
              placeholder={$i18n.t('login:passwordPlaceholder')}
              required
            />
          </label>
          <button class="btn btn-primary mt-4" onclick={login}>{$i18n.t('login:button')}</button>
        </fieldset>
      </div>
    </div>
  </div>
  <span class="basis-0 grow"></span>
  {#if (isReauth || isLogout) && showToast}
    <div class="toast toast-top" out:fly={{ x: 200 }}>
      <div class="alert text-base {isReauth ? 'alert-warning' : 'alert-success'}">
        {#if isReauth}
          <i class="bi bi-exclamation-diamond text-xl"></i>
        {:else}
          <i class="bi bi-check-circle text-xl"></i>
        {/if}
        <span>{$i18n.t(isReauth ? 'login:toast.reauth' : 'login:toast.logoutSuccess')}</span>
      </div>
    </div>
  {/if}
</div>
