<script setup lang="ts">
import { z, ZodError } from 'zod'
import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'

const errors = ref({})
const data = ref({
  code: '',
  name: '',
  type: '',
})

const schema = z.object({
  code: z.string().min(1, 'Code must be at least 1 characters long'),
  name: z.string().min(1, 'Name must be at least 1 characters long'),
  type: z.string(),
})

function onClick(type: string) {
  if (type === 'cancel') {
    navigateTo('/tools-equipment-src/device')
  } else if (type === 'draft') {
    // do something
  } else if (type === 'submit') {
    // do something
    const input = data.value
    console.log(input)
    const errorsParsed: any = {}
    try {
      const result = schema.safeParse(input)
      if (!result.success) {
        // You can handle the error here, e.g. show a message
        const errorsCaptures = result?.error?.errors || []
        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
        errorsCaptures.forEach((value: any) => {
          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
          errorsParsed[keyName as string] = value.message || ''
        })
        console.log(errorMessage)
      }
    } catch (e) {
      if (e instanceof ZodError) {
        const jsonError = e.flatten()
        console.log(JSON.stringify(jsonError, null, 2))
      }
    }
    setTimeout(() => {
      errors.value = errorsParsed
    }, 0)
  }
}
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon name="i-lucide-paint-bucket" class="me-2" />
    <span class="font-semibold">Tambah</span> Alat Kesehatan
  </div>
  <AppDeviceEntryForm v-model="data" :errors="errors" />
  <div class="my-2 flex justify-end py-2">
    <Action @click="onClick" />
  </div>
</template>
