<template>
  <form @submit.prevent="handleRegister()" class="form">
    <h2 class="form__title">{{ t('forms.register.title') }}</h2>
    <div class="form__box">
      <ui-input
          :type="'text'"
          :placeholder="t('fields.firstName')"
          :rules="[required]"
          v-model="firstName"
      />
      <ui-input
          :type="'text'"
          :placeholder="t('fields.lastName')"
          :rules="[required]"
          v-model="lastName"
      />
    </div>
    <div class="form__box">
      <ui-input
          :type="'text'"
          :placeholder="t('fields.phoneNumber')"
          :rules="[required]"
          v-model="phoneNumber"
          :inputMode="'tel'"
      />
      <ui-input
          :type="'email'"
          :placeholder="t('fields.email')"
          :rules="[isEmail]"
          v-model="email"
          :inputMode="'email'"
      />
    </div>
    <ui-input
        :type="'password'"
        :placeholder="t('fields.password')"
        :rules="[isPasswordValid]"
        v-model="password"
    />
    <ui-input
        :type="'password'"
        :placeholder="t('fields.confirmPassword')"
        :rules="[compareStrings]"
        v-model="confirmPassword"
    />
    <ui-button
        :type="'submit'"
        class="form__button"
        :isDisabled="!isFormValid"
        :isLoading="loading"
    >
      {{ t('buttons.register') }}
    </ui-button>
    <p class="form__login">
      {{ t('forms.register.login') }}
      <ui-link
          @click="appStore.setActiveState('login')"
      >
        {{ t('forms.login.title') }}
      </ui-link>
    </p>
  </form>
</template>

<script setup lang="ts">
import {useValidators} from "~/composables/rules";
import {useRegister} from "~/composables/auth/index.js";
import {useRouteQuery} from "@vueuse/router";

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

const { required, isEmail, isPasswordValid } = useValidators();

const firstName = ref<string>('');
const lastName = ref<string>('');
const phoneNumber = ref<string>('');
const email = ref<string>('');
const password = ref<string>('');
const confirmPassword = ref<string>('');

const referrer = useRouteQuery('referrer', '');

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

const isFormValid = computed(() => {
  return (
    required(firstName.value) === true &&
    required(lastName.value) === true &&
    required(phoneNumber.value) === true &&
    isEmail(email.value) === true &&
    isPasswordValid(password.value) === true &&
    compareStrings(confirmPassword.value) === true
  );
});

const { register, loading } = useRegister();

async function handleRegister() {
  await register({
    firstName: firstName.value,
    lastName: lastName.value,
    phoneNumber: phoneNumber.value,
    email: email.value,
    password: password.value,
    confirmPassword: confirmPassword.value,
    referrer: referrer.value
  });
}
</script>

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

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

  &__box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

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

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