<script setup lang="ts">
import { ref } from 'vue'

definePageMeta({
  title: 'Vue Form',
  icon: 'mdi-checkbox-blank-off-outline',
  drawerIndex: 0,
})

const data = ref({})
const humanName = ref({})
const onChange = () => {
  humanName.value = parseName(data.value.nama)
}

const handleResponse = (response, form$) => {
  console.log(response) // axios response
  console.log(response.status) // HTTP status code
  console.log(response.data) // response data

  console.log(form$) // <Vueform> instance
}
</script>

<template>
  <div class="ma-4">
    <Vueform
      v-model="data"
      @change="onChange"
      endpoint="/api/practitioner/test"
      method="post"
      @response="handleResponse"
      sync
    >
      <TextElement
        name="nama"
        placeholder="Nama Lengkap"
        :rules="['required', 'min:3', 'max:100']"
      />
      <StaticElement name="parsed-name" size="sm">
        <div class="d-flex flex-row">
          <v-chip
            v-for="prefix in humanName.prefix"
            size="x-small"
            class="mr-1 bg-indigo-lighten-3"
            >{{ prefix }}</v-chip
          ><v-chip
            v-for="given in humanName.given"
            size="x-small"
            class="mr-1 bg-blue-darken-3"
            >{{ given }}</v-chip
          >
          <v-chip
            v-show="humanName.family"
            size="x-small"
            class="mr-1 bg-blue"
            >{{ humanName.family }}</v-chip
          >
          <v-chip
            v-for="suffix in humanName.suffix"
            size="x-small"
            class="mr-1 bg-indigo-lighten-3"
            >{{ suffix }}</v-chip
          >
        </div>
      </StaticElement>
      <RadiogroupElement
        name="gender"
        view="tabs"
        label="Jenis Kelamin"
        :items="[
          {
            value: 'unknown',
            label: '⭕',
          },
          {
            value: 'male',
            label: '♂️ Laki-laki',
          },
          {
            value: 'female',
            label: '♀️ Perempuan',
          },
          {
            value: 'other',
            label: '⚧️ Lainnya',
          },
        ]"
        default="unknown"
      />

      <ButtonElement
        name="submit"
        button-label="Submit"
        :submits="true"
        align="right"
      />
    </Vueform>
  </div>
  <span>{{ data }}</span>
</template>
