import {Component} from '../../vues6.js'
import {EventBus} from '../service/EventBus.service.js'

const template = `
<span class="message-container">
    <span v-for="message of messages">
        <div class="alert alert-dismissible fade show" role="alert" v-bind:class="[message.type]">
            {{ message.message }}
            <button
                class="close"
                type="button"
                aria-label="Close"
                @click="dismissAlert($event, message)"
            >
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </span>
    
    <span v-for="modal of modals">
        <div
            class="modal fade"
            tabindex="-1"
            role="dialog"
            aria-hidden="true" 
            ref="modal"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ modal.title }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <span v-html="modal.message"></span>
                        <div v-if="Array.isArray(modal.inputs)" class="mt-4 mb-3">
                            <span v-for="input of modal.inputs">
                                <input
                                    type="input.type"
                                    v-model="modal.data[input.name]"
                                    :placeholder="input.placeholder"
                                    class="form-control"
                                >
                            </span>
                        </div>
                    </div>
                    <div class="modal-footer" v-if="modal.buttons && modal.buttons.length > 0">
                        <button
                            type="button"
                            :class="button.class || ['btn', 'btn-secondary']"
                            v-for="button of modal.buttons"
                            :data-dismiss="button.type === 'close' ? 'modal' : ''"
                            @click="modalButtonClick($event, modal, button)"
                        >{{ button.text }}</button>
                    </div>
                </div>
            </div>
        </div>
    </span>
</span>
`
export class MessageContainerComponent extends Component {
    static get selector() { return 'cobalt-messages' }
    static get template() { return template }
    static get props() { return [] }

    constructor() {
        super()
        this.messages = []
        this.modals = []
    }

    vue_on_create() {
        EventBus.get()
            .event('message.alert')
            .subscribe(({ message, type = 'info', timeout = 0, onDismiss = () => {} }) => {
                this.createAlert(message, type, timeout, onDismiss)
            })

        EventBus.get()
            .event('message.modal')
            .subscribe(({ title, message, buttons = [], inputs = [] }) => {
                this.createModal(title, message, buttons, inputs)
            })
    }

    createAlert(message, type, timeout, onDismiss = () => {}) {
        const msg = {
            message,
            onDismiss,
            type: type.startsWith('alert-') ? 'type' : `alert-${type}`,
        }

        this.messages.push(msg)

        if ( timeout > 0 ) {
            setTimeout(() => {
                this.dismissAlert(undefined, msg)
            }, timeout)
        }
    }

    dismissAlert($event, message) {
        this.messages = this.messages.filter(x => x !== message)
        message.onDismiss($event)
    }

    createModal(title, message, buttons = [], inputs = []) {
        const index = this.modals.length
        const modal = {
            title,
            message,
            buttons,
            inputs,
            data: {},
        }

        this.modals.push(modal)
        this.$nextTick(() => {
            $(this.$refs.modal[index]).modal()
        })
    }

    modalButtonClick($event, modal, button) {
        if ( typeof button.onClick === 'function' ) {
            button.onClick($event, modal.data)
        }
    }
}