<template>

    <div
        v-show="isOpen"
        class="relative z-50"
        aria-labelledby="modal-title"
        role="dialog"
        aria-modal="true"
    >

        <!-- Off-canvas / background overlay -->
        <transition
            enter-active-class="transition-opacity ease-out duration-300"
            enter-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity ease-in duration-200"
            leave-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeModal"></div>
        </transition>

        <div class="fixed z-10 inset-0 overflow-y-auto">
            <div class="flex items-center justify-center min-h-full px-2 py-4 md:p-0">
                <transition
                    enter-active-class="transition ease-out duration-300"
                    enter-class="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
                    enter-to-class="opacity-100 translate-y-0 md:scale-100"
                    leave-active-class="transition ease-in duration-200 transform"
                    leave-class="opacity-100 translate-y-0 md:scale-100"
                    leave-to-class="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
                >
                    <div
                        :class="['relative bg-white rounded-sm shadow-xl transform transition-all md:my-8 md:max-w-lg md:w-full', showOverflow ? 'overflow-visible' : 'overflow-hidden']"
                        v-show="isOpen"
                    >

                        <div class="relative bg-white px-6 py-4 border-b border-gray-200">
                            <div id="modal-title">
                                <slot name="modal_title">
                                    {{ title }}
                                </slot>
                            </div>
                            <div class="hidden md:block absolute top-0 right-0 pt-4 pr-4">
                                <button
                                    class="bg-transparent rounded-sm text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                    type="button"
                                    @click="btnSecondaryClicked"
                                >
                                    <span class="sr-only">Close</span>
                                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
                                    >
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <div class="bg-white px-6 py-10">
                            <slot name="modal_content">
                                {{ content }}
                            </slot>
                        </div>

                        <div class="bg-gray-50 px-6 py-3 space-y-2 md:flex md:flex-row-reverse md:space-y-0">
                            <slot name="modal_footer">
                                <button
                                    class="w-full text-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-sm text-white
                                    bg-green-400 md:w-auto md:ml-2 hover:bg-green-500 focus:outline-none focus:shadow-outline-green focus:border-green-600 active:bg-green-600 transition duration-150 ease-in-out"
                                    type="button"
                                    @click="btnPrimaryClicked"
                                >
                                    {{ btnPrimaryText }}
                                </button>
                                <button
                                    class="w-full text-center px-4 py-2 text-sm leading-5 font-medium rounded-sm transition duration-150 ease-in-out border border-gray-300 text-gray-700 bg-white md:w-auto hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50"
                                    type="button"
                                    @click="btnSecondaryClicked"
                                >
                                    {{ btnSecondaryText }}
                                </button>
                            </slot>
                        </div>
                    </div>

                </transition>
            </div>
        </div>

    </div>
</template>


<script>
export default {
    props : {
        title : {
            default : ''
        },
        content : {
            default : ''
        },
        btnSecondaryText : {
            default : 'Cancel'
        },
        btnPrimaryText : {
            default : 'Save'
        },
        showOverflow : {
            type : Boolean,
            default : false
        },
    },
    data() {
        return {
            isOpen : false
        }
    },
    methods : {
        btnPrimaryClicked() {
            this.$emit('btnPrimaryClicked');
        },
        btnSecondaryClicked() {
            this.closeModal();
            this.$emit('btnSecondaryClicked');
        },
        showModal() {
            this.isOpen = true;
        },
        resetModal() {
            this.title = '';
            this.content = '';
        },
        closeModal() {
            this.resetModal();
            this.isOpen = false;
        }
    },
    mounted() {
        document.addEventListener("keydown", (e) => {
            if (this.isOpen && e.keyCode === 27) {
                this.closeModal();
            }
        });
    }
}
</script>
