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

const emit = defineEmits<{
  (e: 'send', num: number): void
}>()
const { t } = useI18n()
const isOpen = defineModel<boolean>({default: false})
const form: any = reactive({
  name: '',
  email: '',
  phone: '',
  comment: '',
})

const scheme = z.object({
  name: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
  email: z.string().nonempty(t('modals.submit_application_modal.rules.required')).email(t('modals.submit_application_modal.rules.email')),
  phone: z.string().nonempty(t('modals.submit_application_modal.rules.required')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
  comment: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
})

const submitted = ref(false)

const { validation, getError } = useUIValidation(
  scheme,
  () => form,
  submitted,
)

const send = () => {
  submitted.value = true
  if (validation.value) return
  emit('send', form)
  form.name = ''
  form.email = ''
  form.phone = ''
  form.comment = ''

}
const cancel = () => {
  isOpen.value = false
}

defineExpose({
  reset: () => (submitted.value = false),
})
</script>

<template>
  <a-modal
    v-model="isOpen"
    name="submit-application"
    :prevent-close="true"
  >
    <div class="flex flex-col gap-5">
      <p class="text-center heading-02">
        {{ t('modals.submit_application_modal.title') }}
      </p>
      <a-ill-mail class="w-full" />
      <div class="flex flex-col gap-2">
        <a-input-standard
          v-model="form.name"
          :label="t('modals.submit_application_modal.labels.name')"
          :error="getError('name')"
        />
        <a-input-standard
          v-model="form.email"
          :label="t('modals.submit_application_modal.labels.email')"
          :error="getError('email')"
        />
        <a-input-standard
          v-model="form.phone"
          v-maska
          :label="t('modals.submit_application_modal.labels.phone')"
          data-maska="8 (###) ###-##-##"
          :error="getError('phone')"
          clearable
          required
        />
        <a-textarea
          v-model="form.comment"
          :label="t('modals.submit_application_modal.labels.comment')"
          :error="getError('comment')"
        />
      </div>
    </div>
    <template #footer>
      <div class="flex gap-2 ">
        <a-button
          view="outline"
          block
          @click="cancel"
        >
          {{ t('reuse.close') }}
        </a-button>
        <a-button
          block
          @click="send"
        >
          {{ t('reuse.send') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped>

</style>
