<template>
  <ElCollapse
    v-model="activeNames"
    class="ivyforms-collapse ivyforms-width-100"
    v-bind="$attrs"
    :accordion="props.accordion"
  >
    <slot />
  </ElCollapse>
</template>

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

type Props = {
  accordion?: boolean
  defaultActive?: string | string[]
}

const props = defineProps<Props>()

const resolveInitialActive = (): string | string[] => {
  const defaultActive = props.defaultActive
  if (props.accordion) {
    if (Array.isArray(defaultActive)) {
      return defaultActive[0] ?? ''
    }
    return defaultActive ?? ''
  }

  if (Array.isArray(defaultActive)) {
    return defaultActive
  }

  return defaultActive ? [defaultActive] : []
}

const activeNames: Ref<string | string[]> = ref(resolveInitialActive())
</script>

<style scoped lang="scss">
.ivyforms-collapse {
  border: none;
}
</style>
