<template>
    <transition leave-active-class="duration-200">
        <div class="relative">
            <div class="hover:cursor-pointer" @click="show = !show">
                <slot name="trigger">
                    <svg v-show="!show" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="6 9 12 15 18 9"></polyline></svg>
                    <svg v-show="show" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="6 9 12 15 18 9"></polyline></svg>
                </slot>
            </div>

            <div v-show="show" class="fixed inset-0 z-40" @click="show = false"></div>

            <transition enter-active-class="ease-out duration-300"
                        enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                        leave-active-class="ease-in duration-200"
                        leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                        leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                <div v-show="show" @click="show = false" class="flex flex-col absolute right-0 bg-white border border-gray-300 shadow-md w-max z-50">
                    <slot></slot>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    maxWidth: {
      type: String,
      default: '2xl',
    },
  },

  setup(props) {
    let show = ref(false)

    return { show }
  },

  mounted() {
    document.addEventListener('keydown', this.closeOnEscape)
  },

  beforeDestroy() {
    document.removeEventListener('keydown', this.closeOnEscape)
  },

  computed: {
    maxWidthClass() {
      return {
        'sm': 'sm:max-w-sm',
        'md': 'sm:max-w-md',
        'lg': 'sm:max-w-lg',
        'xl': 'sm:max-w-xl',
        '2xl': 'sm:max-w-2xl',
      }[this.maxWidth]
    },
  },

  methods: {
    closeOnEscape(event) {
      if (event.key === 'Escape' && this.show) {
        this.show = false
      }
    },
  },
})
</script>

<style scoped>
/*.rotate { animation: rotation 2s infinite linear; }

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

.dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(240, 4.9%, 83.9%);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: max-content;
}

.dropdown-link {
  display: flex;
  padding: 1rem 0.5rem 1rem 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dropdown-link:hover {
  background-color: hsl(240, 4.8%, 95.9%);
}

.dropdown-link:focus {
  background-color: hsl(240, 4.8%, 95.9%);
  outline: 2px solid transparent;
  outline-offset: 2px;
}*/
</style>
