<script setup lang="ts">
// components
import { FieldArray } from 'vee-validate'
import * as DE from '~/components/pub/my-ui/doc-entry'

// form field components
import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'

interface Props {
  isDisabled: boolean
  limit: number
  title: string
}

const props = defineProps<Props>()

const isReadonly = computed(() => props.isDisabled)
</script>
<template>
  <FieldArray
    v-slot="{ fields, push, remove }"
    name="tissueNotes"
  >
    <template v-if="fields.length === 0">
      {{ push({ note: '' }) }}
    </template>
    <div class="space-y-4">
      <DE.Block
        v-for="(field, idx) in fields"
        :key="field.key"
        :col-count="3"
        :cell-flex="false"
      >
        <InputBase
          :label="idx === 0 ? 'Keterangan Jaringan' : undefined"
          :field-name="`tissueNotes[${idx}].note`"
          placeholder="Masukkan catatan"
          :is-disabled="isReadonly"
        />
        <DE.Cell class="flex items-start justify-start">
          <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
            <ButtonAction
              v-if="idx !== 0"
              :disabled="isReadonly"
              preset="delete"
              :title="`Hapus Kontak ${idx + 1}`"
              icon-only
              @click="remove(idx)"
            />
          </DE.Field>
        </DE.Cell>
      </DE.Block>
    </div>

    <ButtonAction
      preset="add"
      label="Tambah Catatan"
      title="Tambah Catatan Keterangan Jaringan"
      :disabled="fields.length >= limit || isReadonly"
      :full-width-mobile="true"
      class="mt-4"
      @click="push({ name: '', dose: '', unit: '' })"
    />
  </FieldArray>
</template>
