<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)
}
</script>

<template>
  <div class="ma-4">
    <Vueform v-model="data" @change="onChange" 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"
      />
    </Vueform>
  </div>
  <span>{{ data }}</span>
  <span>{{ humanName }}</span>
</template>
