<script setup lang="ts">
import * as z from 'zod'
import type { ExposedForm } from '~/types/form'

import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'

const schema = z.object({
  generalEducationNeeds: z
    .array(z.string(), {
      required_error: 'Mohon pilih setidaknya item',
    })
    .min(1, 'Mohon pilih setidaknya item'),

  specificEducationNeeds: z
    .array(z.string(), {
      required_error: 'Mohon pilih setidaknya item',
    })
    .min(1, 'Mohon pilih setidaknya item'),

  learningAbility: z.string({
    required_error: 'Mohon pilih kemampuan belajar',
  }),

  learningWillingness: z.string({
    required_error: 'Mohon pilih kemauan belajar',
  }),

  barrier: z.string({
    required_error: 'Mohon pilih hambatan',
  }),

  learningMethod: z.string({
    required_error: 'Mohon pilih metode pembelajaran',
  }),

  language: z.string({
    required_error: 'Mohon pilih bahasa',
  }),

  languageBarrier: z.string({
    required_error: 'Mohon pilih hambatan bahasa',
  }),

  beliefValue: z.string({
    required_error: 'Mohon pilih keyakinan pada nilai-nilai yang dianut',
  }),
})

const form = ref<ExposedForm<any> | null>(null)

async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    const isValid = await form.value?.validate()
    console.log(isValid)
  }

  if (eventType === 'cancel') {
  }
}
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Asesmen Edukasi</div>
  <AppAssessmentEducationEntryForm
    ref="form"
    :schema="schema"
  />

  <div class="my-2 flex justify-end py-2">
    <Action @click="handleActionClick" />
  </div>
</template>
