<script lang="ts" setup>
import * as z from 'zod'
import { useUIValidation } from '#adata-ui/composables/useUIValidation'

const props = withDefaults(defineProps<{
  formType?: 'get-demo' | 'feedback'
}>(), {
  formType: 'feedback',
})

const emit = defineEmits(['submit'])

const { t } = useI18n()

const fullName = ref<string>('')
const mail = ref<string>('')
const phone = ref<string>('')
const comment = ref<string>('')

const isLoading = defineModel< null | any>('isLoading', { default: false })
const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })

const feedbackScheme = z.object({
  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
})

const getDemoScheme = z.object({
  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
})

const submitted = ref(false)

const feedbackValidation = useUIValidation(
  feedbackScheme,
  () => ({
    phone: phone.value,
    mail: mail.value,
    comment: comment.value,
  }),
  submitted,
)

const getDemoValidation = useUIValidation(
  getDemoScheme,
  () => ({
    fullName: fullName.value,
    phone: phone.value,
    comment: comment.value,
  }),
  submitted,
)

const send = () => {
  submitted.value = true

  if (props.formType === 'feedback') {
    if (feedbackValidation.validation.value) return
  }
  else {
    if (getDemoValidation.validation.value) return
  }

  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
  fullName.value = ''
  phone.value = ''
  mail.value = ''
  comment.value = ''
}

defineExpose({
  reset: () => (submitted.value = false),
})
</script>
<template>
  <section class="flex flex-col gap-4 bg-white p-8 dark:bg-gray-900 sm:gap-8 sm:rounded-[20px]">
    <div class="flex flex-col gap-2">
      <h2 class="heading-01">
        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
      </h2>
      <p class="body-400 text-gray-600 dark:text-gray-200">
        {{ formType === 'feedback' ? t('forms.feedback.subtitle') : t('forms.demo.st') }}
      </p>
    </div>
    <form
      action=""
      class="flex flex-col justify-between gap-2 sm:flex-row sm:gap-4"
    >
      <div class="flex flex-col gap-2 sm:w-1/2 sm:gap-4">
        <a-input-standard
          v-if="formType === 'feedback'"
          v-model="mail"
          type="email"
          color-classes="bg-gray-50 dark:bg-gray-800"
          :error="feedbackValidation.getError('mail')"
          :label="t('forms.feedback.email')"
          required
          size="md"
          :disabled="isLoading"
        />
        <a-input-standard
          v-else
          v-model="fullName"
          :error="getDemoValidation.getError('fullName')"
          :label="t('forms.demo.n')"
          required
          size="md"
          :disabled="isLoading"
        />
        <a-input-standard
          v-model="phone"
          v-maska
          type="tel"
          color-classes="bg-gray-50 dark:bg-gray-800"
          :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
          :label="t('forms.feedback.phone')"
          data-maska="8 (###) ###-##-##"
          required
          size="md"
          :disabled="isLoading"
        />
      </div>
      <div class="sm:w-1/2">
        <a-textarea
          v-model="comment"
          :error="formType === 'feedback' ? feedbackValidation.getError('comment') : getDemoValidation.getError('comment')"
          :label="t('forms.feedback.comment')"
          :resizeable="false"
          class="min-h-[72px]"
          color-classes="bg-gray-50 dark:bg-gray-800"
          required
          size="sm"
          :disabled="isLoading"
        />
      </div>
    </form>
    <AButton
      class="w-full self-end sm:w-[215px]"
      :loading="isLoading"
      @click="send"
    >
      {{ formType === 'feedback' ? t('forms.feedback.send') : t('forms.demo.b') }}
    </AButton>
  </section>

  <a-modal
    v-model="isModalOpen"
    width="424px"
    @close="isModalOpen = false"
  >
    <div class="flex flex-col items-center gap-5">
      <h4 class="heading-04">
        {{ t('forms.feedback.modalTitle') }}
      </h4>
      <a-ill-mail />
      <p class="body-400 max-[352xp]">
        {{ t('forms.feedback.modalSubtitle') }}
      </p>
      <AButton
        block
        view="outline"
        @click="isModalOpen = false"
      >
        {{ t('forms.feedback.close') }}
      </AButton>
    </div>
  </a-modal>
</template>
