import ngModule from '../../module';
import Popup from '../popup';
import template from './index.html';
import './style.scss';

/**
 * Dialog component.
 *
 * @property {HTMLElement} body The dialog HTML body
 * @property {HTMLElement} buttons The dialog HTML buttons
 */
export default class Dialog extends Popup {
    constructor($element, $, $transclude) {
        super($element, $, $transclude);
        this.fillDefaultSlot(template);
    }

    /**
     * Hides the dialog calling the response handler.
     */
    hide() {
        this.fireResponse();
        super.hide();
    }

    /**
     * Calls the response handler.
     *
     * @param {String} response The response code
     * @return {Boolean} %true if response was canceled, %false otherwise
     */
    fireResponse(response) {
        let cancel;
        if (this.onResponse)
            cancel = this.onResponse({response: response});
        return cancel;
    }

    onButtonClick(event) {
        let buttons = this.popup.querySelector('.buttons');
        let tplButtons = buttons.querySelector('tpl-buttons');
        let node = event.target;
        while (node.parentNode != tplButtons) {
            if (node == buttons) return;
            node = node.parentNode;
        }

        let response = node.getAttribute('response');
        let cancel = this.fireResponse(response);

        let close = res => {
            if (res !== false) super.hide();
        };

        if (cancel instanceof Object && cancel.then)
            cancel.then(close);
        else
            close(cancel);
    }
}

ngModule.vnComponent('vnDialog', {
    controller: Dialog,
    transclude: {
        body: 'tplBody',
        buttons: '?tplButtons'
    },
    bindings: {
        onResponse: '&?'
    }
});