<template>
  <div :class="exampleClass" style="overflow: inherit">
    <div><slot></slot></div>

    <AisCollapse v-if="slots.code" :bttn-class="buttonClass">
      <template #button="{ open }">
        {{ codeLabel(open) }}
      </template>

      <div class="pt-8 text-sm">
        <slot name="code"></slot>
      </div>
    </AisCollapse>
  </div>
</template>

<script setup>
  import { computed, ref, useSlots } from 'vue'
  import AisCollapse from "@/components/collapse/AisCollapse.vue";

  const slots = useSlots()
  const isOpen = ref(false)
  const isCode = ref(false)

  const codeLabel = (open) => {
      isOpen.value = open
      isCode.value = true
      return open === true ? 'Hide code' : 'View code'
  }

  const buttonClass = computed(() => {
      const clazz = 'absolute right-0 mt-4 py-0.5 px-1 border-l border-t border-ui-gray-100 rounded-tl text-sm font-bold'
      return isOpen.value === true ? clazz + ' border-b rounded-bl' : clazz
  })

  const exampleClass = computed(() => {
      const clazz = 'relative my-4 p-4 rounded border border-ui-gray-100 overflow-x-auto overflow-y-hidden'
      return isCode.value === true && isOpen.value === false ? clazz + ' pb-10' : clazz
  })

</script>

<script>
export default {
  name: "DocsExample"
}
</script>
