<script setup>
const parsedName = ref({})
const onChange = (newValue, oldValue, el$) => {
  const i = parseInt(el$.$parent.$parent.path.split('.')[1])
  parsedName.value[i] = parseName(el$.$parent.$parent.children$.text.value)
  el$.$parent.$parent.children$.prefix.update(parsedName.value[i].prefix)
  el$.$parent.$parent.children$.given.update(parsedName.value[i].given)
  el$.$parent.$parent.children$.family.update(parsedName.value[i].family)
  el$.$parent.$parent.children$.suffix.update(parsedName.value[i].suffix)
}
</script>
<template>
  <ListElement
    name="name"
    :controls="{
      add: true,
      remove: false,
    }"
    :rules="['min:1']"
    :min="1"
    :max="1"
    :initial="1"
  >
    <template #default="{ index }">
      <ObjectElement
        :name="index"
        :columns="{
          sm: {
            container: 12,
          },
        }"
      >
        <TextElement
          @change="onChange"
          name="text"
          placeholder="Nama Lengkap"
        />
        <HiddenElement name="prefix" :meta="true" />
        <HiddenElement name="given" :meta="true" />
        <HiddenElement name="family" :meta="true" />
        <HiddenElement name="suffix" :meta="true" />
        <!-- <FormLibParsedName :name="parsedName" :path="'address.0'" /> -->
        <StaticElement name="parsed-name" size="m">
          <div v-if="parsedName[index]" class="d-flex flex-row">
            <v-chip
              v-for="(prefix, index) in parsedName[index].prefix"
              :key="`prefix-${index}`"
              size="x-small"
              class="mr-1 bg-indigo-lighten-3"
              >{{ prefix }}</v-chip
            >
            <v-chip
              v-for="(given, index) in parsedName[index].given"
              :key="`given-${index}`"
              size="x-small"
              class="mr-1 bg-blue-darken-3"
              >{{ given }}</v-chip
            >
            <v-chip
              v-show="parsedName[index].family"
              size="x-small"
              class="mr-1 bg-blue"
              >{{ parsedName[index].family }}</v-chip
            >
            <v-chip
              v-for="(suffix, index) in parsedName[index].suffix"
              :key="`suffix-${index}`"
              size="x-small"
              class="mr-1 bg-indigo-lighten-3"
              >{{ suffix }}</v-chip
            >
          </div>
        </StaticElement>
      </ObjectElement>
    </template>
  </ListElement>
</template>
