class ConfirmationController {
    /**
     * ConfirmationController constructor
     *
     * @param selector
     * @param headerText
     * @param message
     * @param confirmText
     * @param cancelText
     */
    constructor(selector, headerText, message, confirmText, cancelText) {
        if (ConfirmationController.selectorValid(selector) === false) {
            console.error('The selector "' + selector + '" isn\'t valid. Did not enable the confirmation functionality for that selector');
            return;
        }

        ConfirmationController.headerText = headerText;
        ConfirmationController.message = message;
        ConfirmationController.confirmText = confirmText;
        ConfirmationController.cancelText = cancelText;

        ConfirmationController.button = document.querySelector(selector);

        ConfirmationController.promptElement = this.createPrompt();
        document.body.appendChild(ConfirmationController.promptElement);

        this.addListenersToButton(ConfirmationController.button);
        this.addListenersToModalButtons();
    }

    /**
     * Adds listeners to the button that the selector from the constructor references to.
     * So that the button works
     *
     * @param button
     */
    addListenersToButton(button) {
        button.addEventListener('click', (function (controller) {
            return function (clickEvent) {
                clickEvent.preventDefault();
                controller.showConfirmationPrompt(true);
            }
        })(this));
    }

    /**
     * Add listeners to the modals buttons.
     * Usually the yes no buttons.
     */
    addListenersToModalButtons() {
        if (!ConfirmationController.promptElement) console.error('First create the modal with the createPrompt method');

        let confirmButton = ConfirmationController.promptElement.querySelector('button.confirm');
        let cancelButton = ConfirmationController.promptElement.querySelector('button.cancel');
        let shader = ConfirmationController.promptElement.querySelector('div.shader');
        // console.log(confirmButton);
        // console.log(cancelButton);
        confirmButton.addEventListener('click', this.confirmClicked.bind(this));
        cancelButton.addEventListener('click', this.cancelClicked.bind(this));
        shader.addEventListener('click', this.cancelClicked.bind(this));
    }

    confirmClicked(mouseEvent) {
        mouseEvent.preventDefault();
        console.log(ConfirmationController.button);

        let form = this.findForm(ConfirmationController.button);
        console.log(form);
        if (form) form.submit();
        this.showConfirmationPrompt(false);
    }

    cancelClicked(mouseEvent) {
        mouseEvent.preventDefault();
        this.showConfirmationPrompt(false);
    }

    /**
     * Retrieves an HTML element and starts traversing up into the dom to find the first form the element is in.
     * Returns the form or false if it cannot be found
     * @param element
     */
    findForm(element) {
        if (!element.parentNode) return false;
        if (element.parentNode.tagName === 'FORM') return element.parentNode;
        return this.findForm(element.parentNode);
    }

    /**
     * Create a div that represents a prompt
     *
     * @returns {HTMLDivElement}
     */
    createPrompt() {
        let html = '<div class="modal">' +
                        '<div class="header"><h4>' + ConfirmationController.headerText + '</h4></div>' +
                            '<div class="body">' +
                                '<p class="message">' + ConfirmationController.message + '</p>' +
                                '<div class="buttons">' +
                                    '<button class="confirm">' + ConfirmationController.confirmText + '</button>' +
                                    '<button class="cancel">' + ConfirmationController.cancelText + '</button>' +
                                '</div>' +
                            '</div>' +
                       '</div>' +
                    '</div>' +
                    '<div class="shader"></div>';

        let promptElement = document.createElement("div");
        promptElement.setAttribute('id', 'confirmBox');
        promptElement.innerHTML = html;

        return promptElement;
    }


    /**
     * Show or hides the confirmation prompt by adding a hidden class to it.
     */
    showConfirmationPrompt(show) {
        ConfirmationController.promptElement.classList.add('show');
        if (!show) ConfirmationController.promptElement.classList.remove('show');
    }

    /**
     * Returns true when a selector references a button tag or an input tag with type button.
     * false if not
     *
     * @param selector
     * @returns {boolean}
     */
    static selectorValid(selector) {
        let button = document.querySelector(selector);
        if (!button) return false;
        if (button.tagName !== 'BUTTON' && button.tagName !== 'INPUT') return false;
        if (button.tagName === "INPUT") if (button.getAttribute('type').toLowerCase() !== 'button' && button.getAttribute('type').toLowerCase() !== 'submit') return false;

        return true;
    }
}