<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
import Field from '~/components/pub/my-ui/form/field.vue'
import Label from '~/components/pub/my-ui/form/label.vue'
import Select from '~/components/pub/my-ui/form/select.vue'
import { Form } from '~/components/pub/ui/form'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import type { InstallationFormData } from '~/schemas/installation.schema'
import TextCaptcha from './_common/text-captcha.vue'


const props = defineProps<{
  schema: any
  errors?: FormErrors
}>()

const emit = defineEmits<{
  submit: [values: InstallationFormData, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const formSchema = toTypedSchema(props.schema)
const formRef = ref()
const captchaRef = ref<InstanceType<typeof TextCaptcha> | null>(null)
const captchaValid = ref(false)

// Form submission handler
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
  const formData: InstallationFormData = {
    name: values.name || '',
    code: values.code || '',
  }
  emit('submit', formData, resetForm)
}

function onCaptchaUpdate(valid: boolean) {
  captchaValid.value = valid
}

// Form cancel handler
function onCancelForm({ resetForm }: { resetForm: () => void }) {
  emit('cancel', resetForm)
}

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"
    v-slot="{ values }"
    as=""
    keep-values
    :validation-schema="formSchema"
    validation-mode="onSubmit" 
  >
      <div class="border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
        <div class="flex flex-col justify-between">

          <InputBase
            field-name="name"
            label="Nama"
            placeholder="Masukkan Nama"
            :errors="errors"/>
          <InputBase
            field-name="email"
            label="Email"
            placeholder="Masukkan Email"
            :errors="errors"/>

          <div class="mt-2">
            <Label class="" for="password">Password</Label>
            <Field class="" id="password" :errors="errors">
              <FormField v-slot="{ componentField }" name="password">
                <FormItem>
                  <FormControl>
                    <Input
                      id="password"
                      v-bind="componentField"
                      type="password"
                      class="w-full"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
            </Field>
          </div>

          <TextCaptcha
            ref="captchaRef"
            :length="5"
            :useSpacing="true"
            :noiseChars="true"
            @update:valid="onCaptchaUpdate"
          />

        </div>
      </div>
  </Form>
</template>
