<template>
  <div
    class="vc-collapse"
    role="tablist"
    aria-multiselectable="true"
  >
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'VcCollapse',
  provide () {
    return {
      collapse: this
    }
  },
  props: {
    modelValue: {
      type: Array as PropType<string[]>,
      default: () => []
    },
    accordion: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  data () {
    return {
      localModel: [] as string[]
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler (val: string[]) {
        this.localModel = val
      }
    },
    localModel (val) {
      this.$emit('update:modelValue', val)
    }
  },
  methods: {
    setActiveName (data: { name: string, state: boolean }) {
      if (this.accordion) {
        const name = data.name
        if (name === this.localModel[0]) {
          this.localModel = []
        } else {
          this.localModel = [data.name]
        }
      } else {
        const _names = [...this.localModel]
        const index = _names.indexOf(data.name)
        if (index > -1) {
          _names.splice(index, 1)
        } else {
          _names.push(data.name)
        }
        this.localModel = _names
      }
    }
  }
})
</script>
