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

const props = defineProps<{
  title?: string
  description?: string
}>()

const emit = defineEmits(['send'])

const { t } = useI18n()

const form = reactive({
  sender_name: '',
  email: '',
  phone_number: ''
})

const submitted = ref(false)

const schema = z.object({
  sender_name: z.string().nonempty(t('forms.feedback.fieldRequired')),
  email: z
    .string()
    .nonempty(t('forms.feedback.fieldRequired'))
    .email(t('forms.feedback.emailValid')),
  phone_number: z
    .string()
    .nonempty(t('forms.feedback.fieldRequired'))
    .min(17, t('forms.feedback.phoneMinLength', { count: 10 }))
})

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

function onSend() {
  submitted.value = true
  if (validation.value) return

  emit('send', form)
  submitted.value = false
  form.sender_name = ''
  form.email = ''
  form.phone_number = ''
}
</script>

<template>
  <div class="rounded-[20px] bg-blue-700 p-4 dark:bg-blue-500 lg:p-8">
    <div class="flex w-full flex-col gap-4 lg:flex-row lg:justify-between">
      <div class="flex flex-col gap-4 text-white lg:max-w-[50%] lg:gap-6">
        <p class="text-[32px] font-bold">
          {{ title || t('forms.request_demo.title') }}
        </p>
        <p class="text-base">
          {{ description || t('forms.request_demo.info') }}
        </p>
      </div>
      <div class="rounded-[20px] bg-white p-6 dark:bg-gray-900 lg:w-[456px]">
        <div class="flex flex-col gap-4">
          <slot name="inputs">
            <div class="flex flex-col gap-4">
              <a-input-standard
                v-model="form.sender_name"
                :label="t('forms.demo.n')"
                :error="getError('sender_name')"
              />
              <a-input-standard
                v-model="form.email"
                :label="t('forms.demo.e')"
                :error="getError('email')"
                type="email"
              />
              <a-input-standard
                v-model="form.phone_number"
                :label="t('forms.demo.p')"
                :error="getError('phone_number')"
                type="tel"
              />
            </div>
          </slot>
          <div class="flex flex-col gap-2">
            <a-button @click="onSend">{{ t('forms.request_demo.send') }}</a-button>
            <p class="text-center text-[10px] text-gray-500">{{ t('forms.request_demo.title') }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
