<template>
  <v-form
    ref="loginForm"
    class="tw:flex tw:flex-col tw:gap-6 tw:rounded-lg tw:border tw:border-solid tw:border-[#D9D9D9] tw:p-6 tw:text-black"
    @submit.prevent="postLogin"
  >
    <div class="tw:flex tw:flex-col tw:gap-3">
      <!-- e-mail -->
      <div class="tw:flex tw:flex-col tw:gap-2">
        <label for="e-mail-input">{{
          $t("core.authentication.emailInput")
        }}</label>
        <v-text-field
          id="e-mail-input"
          ref="emailInput"
          v-model="loginData.email"
          class="login-text-field"
          :counter="50"
          :placeholder="$t('core.authentication.emailInputPlaceholder')"
          variant="outlined"
          clearable
          required
        >
        </v-text-field>
      </div>

      <!-- password -->
      <div class="tw:flex tw:flex-col tw:gap-2">
        <label for="password-input">{{
          $t("core.authentication.passwordInput")
        }}</label>
        <v-text-field
          id="password-input"
          v-model="loginData.password"
          class="login-text-field"
          :counter="50"
          variant="outlined"
          clearable
          type="password"
          :placeholder="$t('core.authentication.passwordInputPlaceholder')"
          required
        >
        </v-text-field>
      </div>
    </div>

    <!-- button -->
    <input
      type="submit"
      :value="$t('core.authentication.loginButton')"
      class="tw:rounded-lg tw:bg-[#2C2C2C] tw:p-3 tw:text-white tw:disabled:cursor-not-allowed tw:disabled:opacity-50"
    />

    <!-- forgot password -->
    <v-btn
      variant="text"
      class="tw:text-black tw:underline"
      @click="handlePasswordForgotten"
      >{{ $t("core.authentication.forgotPasswordLink") }}</v-btn
    >
  </v-form>
</template>

<script setup lang="ts">
import { userNotifier } from "@racletteCore/exports"
import { reactive } from "vue"

const emit = defineEmits<{ submit: [{ email: string; password: string }] }>()

const loginData = reactive({
  email: "",
  password: "",
})

const postLogin = () => emit("submit", loginData)

const handlePasswordForgotten = () => {
  userNotifier.add("Please contact your admin to reset your password.")
}
</script>
