<template>
  <form @submit.prevent="handleReset()" class="form">
    <div class="form__top">
      <h2 class="form__title">{{ t('forms.newPassword.title') }}</h2>
    </div>
    <ui-input
        :type="'password'"
        :placeholder="t('fields.newPassword')"
        :label="t('fields.newPassword')"
        :rules="[isPasswordValid]"
        v-model="password"
    />
    <ui-input
        :type="'password'"
        :placeholder="t('fields.confirmNewPassword')"
        :label="t('fields.confirmNewPassword')"
        :rules="[compareStrings]"
        v-model="confirmPassword"
    />
    <ui-button
        :type="'submit'"
        class="form__button"
        :isDisabled="!isFormValid"
        :isLoading="loading"
    >
      {{ t('buttons.save') }}
    </ui-button>
  </form>
</template>

<script setup lang="ts">
import {useValidators} from '@composables/rules';
import {useNewPassword} from '@composables/auth';

const { t } = useI18n();

const { isPasswordValid } = useValidators();

const password = ref<string>('');
const confirmPassword = ref<string>('');

const compareStrings = (v: string) => {
  if (v === password.value) return true;
  return t('errors.compare');
};

const isFormValid = computed(() => {
  return (
    isPasswordValid(password.value) === true &&
    compareStrings(confirmPassword.value) === true
  );
});

const { newPassword, loading } = useNewPassword();

async function handleReset() {
  await newPassword(
      password.value,
      confirmPassword.value,
  );
}
</script>

<style lang="scss" scoped>
.form {
  width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  &__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  &__title {
    color: #111827;
    font-family: "Playfair Display", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  &__subtitle {
    text-align: center;
    color: #4b5563;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
  }

  &__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    &-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
  }
}
</style>