<template>
    <Transition>
        <div :id="modalBackgroundId" class="modal-background cursor-pointer" v-show="display" @click.self="close">
            <div :id="modalId" class="modal cursor-default" aria-modal="true" :style="modalStyle">
                <div class="modal-header">
                    <div class="row">
                        <h2 class="left modal-title" v-if="title">{{ title }}</h2>
                        <button type="button" class="bouton right close" @click="close">
                            <!-- {{ messages.get('common', 'remove_short') }} -->
                            <span class="visually-hidden">{{ messages.get('common', 'close') }}</span>
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-content">
                    <slot></slot>
                </div>
                <div class="modal-footer" v-if="hasFooterSlot">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </Transition>
</template>

<script>
let uid = 0;

const LOCK_CLASS = 'modal-open';
const LOCK_ATTRIBUTE = 'data-modal-open';

export default {
    props: {
        title: {
            type: String,
            default: () => ''
        },
        modalStyle: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data: function () {
        return {
            id: 0,
            display: false,
            locked: false
        }
    },
    computed: {
        modalBackgroundId: function () {
            return `modal-background-${this.id}`;
        },
        modalId: function () {
            return `modal-${this.id}`;
        },
        hasFooterSlot() {
            return !!this.$slots.footer
        }
    },
    created: function () {
        this.id = uid;
        uid++;
    },
    beforeDestroy: function () {
        this.unlockScroll();
    },
    methods: {
        show: function () {
            this.display = true;
            this.lockScroll();
            this.dispatchEvent('show');

            const modal = document.getElementById(this.modalId);
            if (modal) {
                modal.focus();
            }
        },
        close: function () {
            this.display = false;
            this.unlockScroll();
            this.dispatchEvent('close');
        },
        // Le scroll est confine a la modale : la page derriere reste figee.
        lockScroll: function () {
            if (this.locked) {
                return;
            }
            this.locked = true;
            this.countLock(1);
        },
        unlockScroll: function () {
            if (!this.locked) {
                return;
            }
            this.locked = false;
            this.countLock(-1);
        },
        /**
         * Plusieurs modales peuvent etre ouvertes en meme temps : le compteur
         * vit sur l'element racine, et non en portee de module, pour rester
         * partage entre les bundles webpack qui embarquent ce composant sur
         * une meme page.
         */
        countLock: function (delta) {
            const root = document.documentElement;
            const count = Math.max(0, (parseInt(root.getAttribute(LOCK_ATTRIBUTE), 10) || 0) + delta);
            root.setAttribute(LOCK_ATTRIBUTE, count);
            root.classList.toggle(LOCK_CLASS, 0 < count);
        },
        dispatchEvent: function (event) {
            this.$emit(event);
        }
    }
}
</script>

<style>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>