<template>
  <div
    class="nv-expansion-panels"
    :class="[...sizeableClasses, { dark: dark }]"
  >
    <slot name="default">
      <nv-expansion-panel
        v-for="(item, idx) in items"
        :key="idx"
        :customClass="item.customClass"
        :icon="item.icon"
        :icon-right="item.iconRight"
        :title="item.title"
      />
    </slot>
  </div>
</template>

<script>
import useSize from "../../composables/sizeable";
import { computed } from "vue";

export default {
  name: "NvExpansionPanels",

  props: {
    accordeon: { type: Boolean, default: undefined },
    customClass: { type: String, default: undefined },
    dark: { type: Boolean, default: false },
    icon: { type: String, default: "" },
    items: { type: Array, default: () => [] },
    size: { type: String, default: "md" },
    title: { type: String, default: "" },
  },

  data: () => {
    return {
      id: "",
      children: [],
      openItems: [],
    };
  },

  computed: {
    rounded() {
      let rounded = "";
      let result = this.$attrs.class;
      if (result) {
        result = result
          .split(" ")
          .filter((c) => c.includes("rounded"))
          .join(" ");
        if (result) rounded = result;
      }
      return rounded;
    },
  },

  provide() {
    return {
      parentAccordeon: this.accordeon,
      parentCustomClass: this.customClass,
      parentDark: this.dark,
      parentOpenItems: computed(() => this.parentOpenItems ?? this.openItems),
      parentRounded: computed(() => this.rounded),
      parentSize: this.size,
    };
  },

  created() {
    this.id = `0/`;
  },

  setup(props) {
    const { sizeableClasses } = useSize(props);
    return { sizeableClasses };
  },
};
</script>
<style lang="scss" scoped>
.nv-expansion-panels {
  @apply flex flex-col;
}
</style>
