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

const props = defineProps<{
  name: string
  email: string
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'send'): void
}>()
const { t } = useI18n()

const mask = new Mask({ mask: '# (###) ### ## ##' })

const isOpen = defineModel<boolean>('isOpen', { required: true })
const form: any = reactive({
  name: '',
  email: '',
  phone_number: '',
  comment: ''
})
const phone = ref(form.phone_number)

const scheme = z.object({
  name: z.string().nonempty(t('modals.report_bug.validation.required')),
  email: z.string().nonempty(t('modals.report_bug.validation.required')).email(t('modals.submit_application_modal.rules.email')),
  phone_number: z.string().nonempty(t('modals.report_bug.validation.required')).min(17, t('modals.report_bug.validation.phone', { n: 10 })),
  comment: z.string().nonempty(t('modals.report_bug.validation.required')),
})

const submitted = ref(false)

const { validation, getError } = useUIValidation(
  scheme,
  () => ({
    ...form,
    phone_number: phone.value,
  }),
  submitted,
)

onMounted(() => {
  if (props.email) {
    form.email = props.email
  }
})

watch(phone, () => {
  form.phone_number = mask.unmasked(phone.value)
})

async function send() {
  submitted.value = true
  if (validation.value) return
  try {
    await $fetch<any>('https://users.adata.kz/api/v1/message/error', {
      method: 'POST',
      params: {
        sender_name: form.name,
        email: form.email,
        phone_number: phone.value,
        message: form.comment,
        subject: props.name,
        link: window.location.href
      }
    })
    emit('send')
  } catch (e) {
    console.error(e.message)
  } finally {
    form.name = ''
    form.phone_number = ''
    form.comment = ''
    phone.value = ''
    submitted.value = false
    emit('close')
  }
}
</script>

<template>
  <a-modal v-model="isOpen">
    <template #header>
      <p class="heading-02 text-center">
        {{ t('modals.report_bug.title') }}
      </p>
    </template>
    <div class="flex flex-col gap-5">
      <div class="flex flex-col items-center justify-center gap-5">
        <a-ill-stop-sign class="size-[185px]" />
        <slot name="title">
          <p class="label-400 text-center">
            {{ name }}
          </p>
        </slot>
      </div>
      <div class="flex flex-col gap-2">
        <a-input-standard
          v-model="form.name"
          required
          :label="t('modals.report_bug.labels.name')"
          :error="getError('name')"
        />
        <a-input-standard
          v-model="form.email"
          required
          :label="t('modals.report_bug.labels.email')"
          :error="getError('email')"
        />
        <a-input-standard
          v-model="phone"
          v-maska
          required
          data-maska="8 (###) ### ## ##"
          clearable
          :label="t('modals.report_bug.labels.phone')"
          :error="getError('phone_number')"
        />
        <div>
          <a-textarea
            v-model="form.comment"
            required
            :label="t('modals.report_bug.labels.comment')"
            size="md"
            :error="getError('comment')"
            class="min-h-[120px]"
            :resizeable="false"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex w-full gap-2">
        <a-button
          view="outline"
          class="w-full"
          @click="emit('close')"
        >
          {{ t('actions.close') }}
        </a-button>
        <a-button
          class="w-full"
          @click="send"
        >
          {{ t('actions.send') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped></style>
