<script setup>
import { useVModel } from "@vueuse/core";
const props = defineProps({
  icon: { type: String, required: false },
  text: { type: String, required: false },
  description: { type: String, required: false },
  containerClass: { type: String, required: false, default: "" },
  headerClass: { type: String, required: false },
  collapse: { type: Boolean, required: false, default: true },
  open: { type: Boolean, required: false, default: true },
  padding: { type: [Boolean, String], required: false, default: true }
});
const open = useVModel(props, "open", void 0, { passive: true });
function onToggle(e) {
  open.value = e.target.open;
}
</script>

<template>
  <!-- TODO: Seems something wrong with the DOM type -->
  <!-- @vue-ignore -->
  <details :open="open" @toggle="onToggle">
    <summary
      class="cursor-pointer select-none p4 hover:bg-active"
      :class="collapse ? '' : 'pointer-events-none'"
    >
      <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
        <div>
          <div text-base>
            <slot name="text">
              {{ text }}
            </slot>
          </div>
          <div v-if="description || $slots.description" text-sm op50>
            <slot name="description">
              {{ description }}
            </slot>
          </div>
        </div>
        <div class="flex-auto" />
        <slot name="actions" />
        <NIcon
          v-if="collapse"
          icon="carbon-chevron-down"
          class="chevron"
          cursor-pointer place-self-start text-base op75 transition duration-500
        />
      </NIconTitle>
    </summary>
    <div
      v-lazy-show="open"
      class="flex flex-col flex-gap2 pb6 pt2"
      :class="typeof padding === 'string' ? padding : padding ? 'px4' : ''"
    >
      <slot name="details" />
      <div :class="containerClass" class="mt1">
        <slot />
      </div>
      <slot name="footer" />
    </div>
  </details>
  <div class="x-divider" />
</template>

<style scoped>
details,summary{--at-apply:border-none}summary{list-style:none}details[open] summary{--at-apply:border-none}details summary::-webkit-details-marker{display:none}details[open] .chevron{opacity:.75;transform:rotate(180deg)}
</style>
