<template>
  <div>
    <TransitionRoot appear as="template" :show="showModal">
      <Dialog as="div" @close="closeModal">
        <div class="fixed inset-0 z-50 overflow-y-auto">
          <div class="min-h-screen px-4 text-center">
            <TransitionChild
                as="template"
                enter="duration-500 ease-out"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="duration-300 ease-in"
                leave-from="opacity-100"
                leave-to="opacity-0"
            >
              <DialogOverlay class="fixed inset-0 bg-black opacity-80" />
            </TransitionChild>

            <span class="inline-block h-screen align-middle" aria-hidden="true">&#8203;</span>

<!--            <div ref="modal">-->
              <TransitionChild
                  as="template"
                  enter="duration-500 ease-out"
                  enter-from="opacity-0 scale-90"
                  enter-to="opacity-100 scale-100"
                  leave="duration-300 ease-in"
                  leave-from="opacity-100 scale-100"
                  leave-to="opacity-0 scale-90"
                  @before-enter="emit('show', modal)"
                  @after-enter="emit('shown', modal)"
                  @before-leave="emit('hide', modal)"
                  @after-leave="emit('hidden', modal)"
              >
                <div
                    class="inline-block p-6 my-8 overflow-hidden text-left transition-all transform shadow-xl rounded-2xl"
                    :class="[sizeClass, classes]"
                >
                  <div v-if="dismissButton" class="block absolute top-6 right-6 text-ui-gray-100"> <!-- top and right should match body padding-->
                    <BaseButton @click="closeModal">
                      <AisIcon icon="cancel" class="!text-xl" :class="dismissClasses" aria-hidden="true"/>
                    </BaseButton>
                  </div>

                  <div class="flex" :class="contentClasses">
                    <div v-if="hasIcon">
                      <slot name="icon">
                        <AisIcon v-if="icon" :icon="icon" :class="iconClasses"/>
                      </slot>
                    </div>
                    <div class="w-full">
                      <DialogTitle :as="titleAs" :class="titleClasses">
                        <slot name="title">{{ title }}</slot>
                      </DialogTitle>

                      <DialogDescription class="hidden">
                        {{ descr }}
                      </DialogDescription>

                      <slot name="default"></slot>
                    </div>
                  </div>

                </div>
              </TransitionChild>
<!--            </div>-->
          </div>
        </div>
      </Dialog>
    </TransitionRoot>
  </div>
</template>


<script setup>
  import { computed, ref, useSlots } from 'vue'
  import AisIcon from '@/components/icon/AisIcon.vue'
  import BaseButton from '@/components/button/BaseButton.vue'
  import { iconProps } from "@c/icon/ais-icons";
  import {
      TransitionRoot,
      TransitionChild,
      Dialog,
      DialogOverlay,
      DialogTitle,
      DialogDescription,
  } from '@headlessui/vue'
  import {classToArray} from "@/util/class-util";

  const modal = ref(null)
  const emit = defineEmits(['update:modelValue', 'show', 'shown', 'hide', 'hidden'])

  const props = defineProps({
      modelValue: { type: Boolean, required: false, default: () => false },

      /**
       * CSS classes for modal body
       */
      class: { type: [String, Array], default: () => 'bg-white' },

      /**
       * Text content to place in the title
       */
      title: { type: String },

      /**
       * CSS class (or classes) to apply to the title
       */
      titleClass: { type: [String, Array], default: () => 'mt-0' },

      /**
       * Specify the HTML tag to render instead of the default tag for the title
       */
      titleAs: { type: String, default: () => 'h3' },

      /**
       * Text for the aria-describedby for the modal
       */
      descr: { type: String, default: () => '' },

      /**
       * Set the size of the modal's width. 'sm', 'md' (default), 'lg', or 'xl'
       */
      size: { type: String, default: 'md' },

      /**
       * Hides the close button in the header
       */
      dismissButton: { type: Boolean, default: true },

      /**
       * Hides the close button in the header
       */
      dismissClass: { type: [String, Array], default: [] },

      /**
       * CSS classes for modal body content
       */
      contentClass: { type: [String, Array], default: () => '' },
      
      ...iconProps,

      iconTop: { type: Boolean, default: false },

      /**
       * CSS classes for modal body icon
       */
      iconClass: { type: [String, Array], default: () => '' },

  })

  const hasIcon = computed( () => !!useSlots().icon || !!props.icon)

  const showModal = computed({
    get () { return props.modelValue },
    set(val) { emit('update:modelValue', val) }
  })

  const titleClasses = computed(() => {
    if(props.titleClass)
      return Array.isArray(props.titleClass) ? props.titleClass.join(' ') : props.titleClass

    return 'text-xl font-bold'
  })
  const classes = computed(() => Array.isArray(props.class) ? props.class.join(' ') : props.class)
  // const descrClasses = computed(() => Array.isArray(props.modalDescClass) ? props.modalDescClass.join(' ') : props.modalDescClass)
  const dismissClasses = computed(() => Array.isArray(props.dismissClass) ? props.dismissClass.join(' ') : props.dismissClass)
  const iconClasses = computed(() => Array.isArray(props.iconClass) ? props.iconClass.join(' ') : props.iconClass)
  const contentClasses = computed(() => {
      const classes = []
      
      if(props.iconTop)
          classes.push('flex-col')
      else
          classes.push('items-start')

      if(Array.isArray(props.contentClass))
          classes.push(...props.contentClass)
      else 
          classes.push(...classToArray(props.contentClass))
      
      return classes;
  })

  const sizeClass = computed(() => {
      if(props.size === 'sm')
          return 'w-1/4 w-max-sm';
      if(props.size === 'lg')
          return 'w-3/4 w-max-lg';
      if(props.size === 'xl')
          return 'w-full w-max-xl';

      return 'w-1/2 w-max-md';
  })

  const closeModal = () => { showModal.value = false }
</script>

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