<script lang="ts" setup>
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { ref, toRefs, watch } from 'vue'
import Icon from '../Icon/index.vue'
import Collapsible from './Collapsible.vue'

interface CollapsibleItem {
  title: string
  content: string
  isOpen?: boolean
}

const props
  = defineProps<{
    items?: CollapsibleItem[]
    classes?: {
      wrapper?: string
      button?: string
      title?: string
      panel?: string
    }
    accordion?: boolean
  }>()

const { items } = toRefs(props)

const children = ref(props.items)

watch(items, (val) => {
  children.value = val
})

const onToggle = (item: CollapsibleItem) => {
  if (props.accordion) {
    children.value.forEach((child) => {
      child.isOpen = false
    })
    item.isOpen = true
  }
}
</script>

<template>
  <div class="w-full p-2" :class="classes?.wrapper">
    <slot>
      <Collapsible
        v-for="(item, idx) in children"
        :key="idx"
        v-bind="item"
        v-model="item.isOpen"
        @toggle="onToggle(item)"
      />
    </slot>
  </div>
</template>