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

const data = ref({ name: '' })

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>
  <Vueform v-model="data" validate-on="change|step" endpoint="/api/practitioner/basic" method="post"
    @response="handleResponse">
    <StaticElement name="identifierTitle" tag="h3" content="Nomor Identitas" />
    <FormLibIdentifier />
    <StaticElement name="divider" tag="hr" />
    <StaticElement name="nameTitle" tag="h4" content="Personal Info" />
    <FormLibHumanName />
    <RadiogroupElement name="gender" view="tabs" :items="[
      {
        value: 'unknown',
        label: '⭕',
      },
      {
        value: 'male',
        label: '♂️',
      },
      {
        value: 'female',
        label: '♀️',
      },
      {
        value: 'other',
        label: '⚧️',
      },
    ]" default="unknown" />
    <SelectElement name="birthPlace" :search="true" :native="false" input-type="search" autocomplete="on"
      placeholder="Tempat Lahir" :columns="{
        sm: {
          container: 6,
        },
      }" items="/jsondata/birth-place.json" value-prop="name" label-prop="name" search-param="name" />
    <DateElement name="birthDate" placeholder="Tanggal Lahir" :columns="{
      sm: {
        container: 6,
      },
    }" />
    <FileElement name="photo" accept="image/*" view="image" :rules="[
      'mimetypes:image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/tiff',
    ]" :urls="{}" :drop="true" label="Pas Foto" />
    <StaticElement name="divider_1" tag="hr" />
    <StaticElement name="addressTitle" tag="h4" content="Alamat" />
    <FormLibAddress />
    <StaticElement name="divider_2" tag="hr" />
    <StaticElement name="contactTitle" tag="h4" content="Kontak" />
    <ListElement name="telecom">
      <template #default="{ index }">
        <ObjectElement :name="index">
          <SelectElement name="system" :items="[
            {
              value: 'phone',
              label: '📞',
            },
            {
              value: 'email',
              label: '📧',
            },
            {
              value: 'url',
              label: '🌐',
            },
          ]" :search="true" :native="false" input-type="search" autocomplete="off" :can-deselect="false"
            :can-clear="false" default="phone" :columns="{
              default: {
                container: 2,
              },
              sm: {
                container: 1,
              },
            }" :caret="false" />
          <SelectElement name="use" :items="[
            {
              value: 'home',
              label: '🏠',
            },
            {
              value: 'mobile',
              label: '📱',
            },
            {
              value: 'work',
              label: '🏢',
            },
          ]" :search="true" :native="false" input-type="search" autocomplete="off" :columns="{
            default: {
              container: 2,
            },
            sm: {
              container: 1,
            },
          }" :caret="false" :can-deselect="false" :can-clear="false" default="home" />
          <GroupElement name="value" :columns="{
            default: {
              container: 8,
            },
            sm: {
              container: 10,
            },
          }">
            <PhoneElement name="phone" :allow-incomplete="true" :unmask="true" default="+62"
              :conditions="[['telecom.*.system', 'in', ['phone']]]" />
            <TextElement name="email" input-type="email" :rules="['nullable', 'email']"
              placeholder="eg. example@mail.com" :conditions="[['telecom.*.system', 'in', ['email']]]" />
            <TextElement name="url" input-type="url" :rules="['nullable', 'url']" placeholder="eg. http(s)://domain.com"
              :floating="false" :conditions="[['telecom.*.system', 'in', ['url']]]" />
          </GroupElement>
        </ObjectElement>
      </template>
    </ListElement>
    <StaticElement name="divider_3" tag="hr" />
    <StaticElement name="communicationTitle" tag="h4" content="Komunikasi" />
    <ListElement name="communication">
      <template #default="{ index }">
        <ObjectElement :name="index">
          <ObjectElement name="language">
            <SelectElement name="text" :items="[
              {
                value: 'INDONESIA',
                label: 'INDONESIA',
              },
            ]" :search="true" :native="false" input-type="search" autocomplete="off" placeholder="Bahasa" />
          </ObjectElement>
          <HiddenElement name="preferred" :default="true" :meta="true" />
        </ObjectElement>
      </template>
    </ListElement>
    <ToggleElement name="active" text="Catatan praktisi ini digunakan secara aktif" :default="true" />

    <ButtonElement name="submit" button-label="Submit" :submits="true" align="right" />
  </Vueform>
  <p>{{ data }}</p>
  <!-- <p>{{ data.value.name }}</p> -->
</template>
