<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"
        :inputMode="'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 lang="ts">
import {useLogin} from "~/composables/auth";
import {useValidators} from "~/composables/rules";

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

const { required, isEmail } = useValidators();

const email = ref<string>('');
const password = ref<string>('');
const isStayLogin = ref<boolean>(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>