<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { FieldArray } from 'vee-validate'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import SelectContactType from './_common/select-contact-type.vue'
import { Form } from '~/components/pub/ui/form'

const props = defineProps<{
  title: string
  schema: any
  contactLimit: number
  initialValues?: any
  errors?: FormErrors
}>()

const { contactLimit = 5 } = props
const formSchema = toTypedSchema(props.schema)
const formRef = ref()

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})
</script>

<template>
  <Form
    ref="formRef"
    as=""
    keep-values
    :validation-schema="formSchema"
    :validate-on-mount="false"
    validation-mode="onSubmit"
    :initial-values="initialValues || { contacts: [{ contactType: '', contactNumber: '' }] }"
  >
    <div>
      <p
        v-if="props.title"
        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
      >
        {{ props.title || 'Kontak Pasien' }}
      </p>
    </div>
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
        <FieldArray
          v-slot="{ fields, push, remove }"
          name="contacts"
        >
          <div
            v-for="(field, idx) in fields"
            :key="field.key"
            class="flex-row gap-2 md:flex"
          >
            <div class="min-w-0 flex-[2]">
              <SelectContactType
                :field-name="`contacts[${idx}].contactType`"
                :label="`Kontak ${idx + 1}`"
                :is-required="idx === 0"
              />
            </div>
            <div class="min-w-0 flex-[1.5]">
              <InputBase
                :field-name="`contacts[${idx}].contactNumber`"
                placeholder="081234567890"
                label="No"
                numeric-only
                :max-length="15"
                :is-required="idx === 0"
              />
            </div>
            <div class="flex-1 self-start md:pt-8">
              <Button
                type="button"
                variant="outline"
                size="icon"
                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
                :class="{ invisible: idx === 0 }"
                @click="remove(idx)"
              >
                <Icon
                  name="i-lucide-trash-2"
                  class="h-5 w-5"
                />
              </Button>
            </div>
          </div>

          <div class="self-center pt-3">
            <Button
              :disabled="fields.length >= contactLimit"
              type="button"
              variant="outline"
              size="sm"
              @click="push({ contactType: '', contactNumber: '' })"
            >
              <Icon
                name="i-lucide-plus"
                class="h-5 w-5"
              />
              Tambah Kontak
            </Button>
          </div>
        </FieldArray>
      </div>
    </div>
  </Form>
</template>
