<template>
  <form @submit.prevent="handleLogin()" class="form">
    <h2 class="form__title">{{ t('forms.login.title') }}</h2>
    <ui-input
        :type="'email'"
        :placeholder="t('fields.email')"
        :rules="[isEmail]"
        v-model="email"
    />
    <ui-input
        :type="'password'"
        :placeholder="t('fields.password')"
        :rules="[required]"
        v-model="password"
    />
    <ui-checkbox
        v-model="isStayLogin"
    >
      {{ t('checkboxes.remember') }}
    </ui-checkbox>
    <ui-link
        @click="appStore.setActiveState('reset-password')"
    >
      {{ t('forms.login.forgot') }}
    </ui-link>
    <ui-button
        class="form__button"
        :isDisabled="!isFormValid"
        :isLoading="loading"
    >
      {{ t('buttons.login') }}
    </ui-button>
    <p class="form__register">
      {{ t('forms.login.register') }}
      <ui-link
          @click="appStore.setActiveState('register')"
      >
        {{ t('forms.register.title') }}
      </ui-link>
    </p>
  </form>
</template>

<script setup>
import {useI18n} from "vue-i18n";
import {isEmail, required} from "@/core/rules/textFieldRules.js";
import {computed, ref} from "vue";
import UiInput from "@/components/ui/ui-input.vue";
import UiButton from "@/components/ui/ui-button.vue";
import UiCheckbox from "@/components/ui/ui-checkbox.vue";
import {useLogin} from "@/composables/auth";
import UiLink from "@/components/ui/ui-link.vue";
import {useAppStore} from "@/stores/app.js";

const {t} = useI18n()
const appStore = useAppStore()

const email = ref('')
const password = ref('')
const isStayLogin = ref(false)

const isFormValid = computed(() => {
  return (
    isEmail(email.value) === true &&
    required(password.value) === true
  )
})

const { login, loading } = useLogin();

async function handleLogin() {
  await login(email.value, password.value, isStayLogin.value);
}
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;

  &__title {
    font-size: 36px;
    color: $accent;
  }

  &__register {
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 12px;
  }
}
</style>