<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import type { LoginMethod } from "@/types";
import * as log from "loglevel";
import { reactive } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

defineProps<{
  loginMethod: LoginMethod;
}>();

log.debug("LoginView.vue created");
log.debug(route.query);

const state = reactive({
  username: "",
  password: "",
});

const userStore = useUserStore();
</script>

<template>
  <main class="bg-gray-200 lg:px-12 lg:py-12">
    <div class="container-medium">
      <h1 class="mb-8">Login</h1>
      <h2>{{ $t("welcome") }}</h2>

      <form
        v-if="loginMethod === 'local'"
        class="bg-white p-4 lg:p-8"
        @submit.prevent="
          userStore.handleLogin(
            state.username,
            state.password,
            route.query.next as string
          )
        "
      >
        <div class="mb-4">
          <label class="mb-1 block" for="email">{{ $t("Benutzername") }}</label>
          <input
            id="username"
            v-model="state.username"
            type="text"
            name="username"
            autocomplete="username"
            class="mt-1 block w-96 max-w-full border px-3 py-2"
          />
        </div>
        <div class="mb-4">
          <label class="mb-1 block" for="password">{{ $t("Passwort") }}</label>
          <input
            id="password"
            v-model="state.password"
            type="password"
            name="password"
            autocomplete="current-password"
            class="mt-1 block w-96 max-w-full border px-3 py-2"
          />
        </div>

        <div>
          <input
            data-cy="login-button"
            type="submit"
            value="Login"
            class="btn-primary"
          />
        </div>
      </form>

      <div v-if="loginMethod === 'sso'" class="bg-white p-4 lg:p-8">
        <p>
          {{
            $t(
              "Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren."
            )
          }}
        </p>
        <p class="btn-primary mt-8">
          <a :href="`/sso/login/?lang=${userStore.language}`">
            {{ $t("SSO Login/Registration") }}
          </a>
        </p>
        <p class="mt-8">
          <a href="/login-local">
            {{ $t("Demo Login") }}
          </a>
        </p>
      </div>
    </div>
  </main>
</template>

<style scoped></style>
