<template>
  <form @submit.prevent="handleContactUs()" class="form">
    <h2 class="form__title">{{ t('contact.form.title') }}</h2>
    <ui-input
        :type="'text'"
        :placeholder="t('fields.name')"
        :label="t('fields.name')"
        :rules="[required]"
        v-model="name"
    />
    <ui-input
        :type="'email'"
        :placeholder="t('fields.email')"
        :label="t('fields.email')"
        :rules="[required]"
        v-model="email"
        :inputMode="'email'"
    />
    <ui-input
        :type="'text'"
        :placeholder="t('fields.phoneNumber')"
        :label="t('fields.phoneNumber')"
        :rules="[required]"
        v-model="phoneNumber"
        :inputMode="'tel'"
    />
    <ui-input
        :type="'text'"
        :placeholder="t('fields.subject')"
        :label="t('fields.subject')"
        :rules="[required]"
        v-model="subject"
    />
    <ui-textarea
        :placeholder="t('fields.message')"
        :label="t('fields.message')"
        :rules="[required]"
        v-model="message"
    />
    <ui-button
        :type="'submit'"
        class="form__button"
        :isDisabled="!isFormValid"
        :isLoading="loading"
    >
      {{ t('buttons.sendMessage') }}
    </ui-button>
  </form>
</template>

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

const { t } = useI18n();

const { required } = useValidators();

const name = ref<string>('');
const email = ref<string>('');
const phoneNumber = ref<string>('');
const subject = ref<string>('');
const message = ref<string>('');

const isFormValid = computed(() => {
  return (
    required(name.value) === true &&
    required(email.value) === true &&
    required(phoneNumber.value) === true &&
    required(subject.value) === true &&
    required(message.value) === true
  );
});

const { contactUs, loading } = useContactUs();

async function handleContactUs() {
  await contactUs(
      name.value,
      email.value,
      phoneNumber.value,
      subject.value,
      message.value,
  );
}
</script>

<style lang="scss" scoped>
.form {
  width: 585px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 32px;

  &__title {
    color: #1a1a1a;
    font-family: "Playfair Display", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
}
</style>