<template>
    <ui-dialog v-model="showModal" type="close" class="livetiles-action-modal" tabindex="1" use-dark-overlay="true" :data-modal-type="tile.value.modalType">
        <img         v-if="tile.value.modalType === 'image'"  :src="(tile.value.mediaSrc || tile.value.src)" />
        <video  v-else-if="tile.value.modalType === 'video'"  :src="tile.value.mediaSrc" controls></video>
        <audio  v-else-if="tile.value.modalType === 'audio'"  :src="tile.value.mediaSrc" style="width: 75%; margin: 5% 12.5%;" controls></audio>
        <iframe v-else-if="tile.value.modalType === 'iframe'" :src="tile.value.mediaSrc" height="600" frameborder="0"></iframe>
        <div    v-else-if="tile.value.modalType === 'html'" v-html="(tile.value.htmlAction || tile.value.textareaAction)"></div>
    </ui-dialog>
</template>

<script>
    {
        data: {
            showModal: false
        },
        methods: {
            click: function (closeCallback) {
                this.showModal = true;
            },
            overlayClick: function (event) {
                event.preventDefault();
                event.stopPropagation();

                this.close();
            },
            keydownListener: function (event) {
                if (this.showModal && event.which === 27) {
                    this.close();
                }
            },
            close: function (event) {
                const closeButton = this.$el.querySelector('.ms-Dialog-buttonClose');
                    
                if (closeButton && typeof closeButton.click === 'function') {
                    closeButton.click();
                }
            }
        },
        watch: {
            showModal: function (value) {
                if (typeof this.$el !== 'undefined') {
                    if (value) {
                        // Bind keydown listener when modal is open
                        this.$el.parentElement.addEventListener('keydown', this.keydownListener.bind(this));

                        // Handle clicks on overlay and focus modal
                        this.$nextTick(function () {
                            this.$el.focus();

                            if (this.$el.nextElementSibling) {
                                this.$el.nextElementSibling.addEventListener('click', this.overlayClick.bind(this));
                            }
                        });
                    }
                    else {
                        // Remove keydown listener when modal is closed
                        this.$el.parentElement.removeEventListener('keydown', this.keydownListener.bind(this));
                    }
                }
            }
        },
        mounted: function () {
            this.eventBus.$on('click', this.click.bind(this));

            // Try to determine the modal type if it is undefined
            if (typeof this.tile.value.modalType === 'undefined') {
                if (this.tile.value.htmlAction || this.tile.value.textareaAction) {
                    this.tile.value.modalType = 'html';
                }
                else if (this.tile.value.src) {
                    this.tile.value.modalType = 'image';
                }
            }
        },
        destroyed: function () {
            this.eventBus.$off('click');
        }
    }
</script>

<style>
    .livetiles-action-modal.ms-Dialog.is-open {
        background-color: "[theme:neutralLighter, default:#f4f4f4]";
        width: 650px;
        max-width: none;
        max-height: 80%;
        z-index: 1000004;
    }

    .livetiles-action-modal.ms-Dialog.is-open .ms-Dialog-title {
        display: none;
    }

    .livetiles-action-modal.ms-Dialog-content {
        background-color: "[theme:bodyBackground, default:#fff]";
        overflow: hidden;
        height: 100%;
    }

    .livetiles-action-modal.ms-Dialog .ms-Dialog-subText,
    .livetiles-action-modal.ms-Dialog .ms-Dialog-actions {
        display: none;
    }

    .livetiles-action-content .livetiles-action-modal.ms-Dialog.is-open + .ms-Overlay {
        background-color: rgba(0,0,0,.4);
        z-index: 1000003;
    }

    .livetiles-action-modal.ms-Dialog[data-modal-type="image"],
    .livetiles-action-modal.ms-Dialog[data-modal-type="video"] {
        padding: 0;
    }

    .livetiles-action-modal.ms-Dialog[data-modal-type="image"] .ms-Dialog-content,
    .livetiles-action-modal.ms-Dialog[data-modal-type="video"] .ms-Dialog-content {
        margin-top: 50px;
    }

    .livetiles-action-modal.ms-Dialog[data-modal-type="image"] img,
    .livetiles-action-modal.ms-Dialog[data-modal-type="video"] video {
        display: block;
        height: auto;
        width: 100%;
    }

    .livetiles-action-modal.ms-Dialog[data-modal-type="iframe"] {
        padding: 0 10px;
    }

    .livetiles-action-modal.ms-Dialog[data-modal-type="iframe"] iframe {
        width: 100%;
    }
</style>