<template>
  <table :class="getModifiersClass('c-accordion', modifiers)">
    <thead v-if="headings">
      <tr class="c-accordion__heading">
        <th v-for="(heading, index) in headings" :key="index" tabindex="0"
          :class="{ 'js-accordion-sort-column c-accordion__heading-sort-column': hasSorting }">
          {{ heading }}
        </th>
        <th></th>
      </tr>
    </thead>
    <c-accordion-item v-for="(item, index) in items" :key="index" :contents="item.contents" :titles="item.titles">
    </c-accordion-item>
    <slot />
  </table>
</template>

<script setup lang="ts">
import type { ModifierItems } from './accordion.config';
import type Accordion from './accordion';
import useComponentModifiers from '../../composable/useComponentModifiers';
import CAccordionItem from './CAccordionItem.vue';
import { onUnmounted } from 'vue';

const props = defineProps<{
  modifiers?: ModifierItems;
  headings?: string[];
  items?: {
    titles: string[];
    contents: string[];
  }[];
  hasSorting?: boolean;
  disableScript?: boolean;
}>();

if (!props.disableScript && typeof document !== 'undefined') {
  let accordionInstance: Accordion | null;
  import('./accordion').then(({ default: accordion }) =>
    accordionInstance = new accordion(document))

  onUnmounted(() => {
    accordionInstance?.destroy();
    accordionInstance = null;
  })
}

const { getModifiersClass } = useComponentModifiers();

</script>
