class QuestionnairePage {

    /**
     * @param {number} nbQuestions
     */
    constructor(nbQuestions) {
        this.nbQuestions = nbQuestions;
        this.uindex = 999;
        this.initialize();
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            document.addEventListener('click', this.onClick.bind(this));
        });
    }

    /**
     * @param {PointerEvent} event
     * @return {*}
     */
    onClick(event) {
        let target = event.target;
        let element;

        if (element = target.closest('[data-add-question]')) {
            return this.onAddQuestion(target, event);
        }
        if (element = target.closest('[data-remove-question]')) {
            return this.onRemoveQuestion(target, event);
        }
    }

    /**
     * @param {HTMLElement} target
     * @param {MouseEvent} event
     */
    onAddQuestion(target, event) {
        let sub = target.dataset.subQuestion === 'true';

        if (target.dataset.questionType === 'inline') {
            this.addQuestion(target, '[data-question-template="inline"]', sub);
            return true;
        }
        if (target.dataset.questionType === 'simple') {
            this.addQuestion(target, '[data-question-template="simple"]', sub);
            return true;
        }
        if (target.dataset.questionType === 'multiple') {
            this.addQuestion(target, '[data-question-template="multiple"]', sub);
            return true;
        }
        if (target.dataset.questionType === 'multiple-ex') {
            this.addQuestion(target, '[data-question-template="multiple-ex"]', sub);
            return true;
        }
    }

    /**
     * @param {HTMLElement} target
     * @param {MouseEvent} event
     */
    onRemoveQuestion(target, event) {
        target.closest("[data-root-node]").remove();
        return true;
    }

    /**
     * @param {HTMLElement} source
     * @param {string} selector
     * @param {boolean} sub
     */
    addQuestion(source, selector, sub = false) {
        let el = document.querySelector(selector);

        if (el) {
            let newQuestion = el.cloneNode(true);
            let dest;
            this.nbQuestions++;
            newQuestion.dataset.index = this.nbQuestions;
            newQuestion.dataset.rootNode = 'root';
            delete newQuestion.dataset.questionTemplate;

            if (sub) {
                this.uindex++;
                let subIndex = source.closest('[data-root-node]').dataset.index;

                newQuestion.querySelector('[data-input-name="question"]')
                    ?.setAttribute('name', `questions[${subIndex}][choices][${this.uindex}][title]`)

                newQuestion.querySelector('[data-input-name="comment"]')
                    ?.setAttribute('name', `questions[${subIndex}][choices][${this.uindex}][comment]`)

                newQuestion.querySelector('[data-input-name="type"]')
                    ?.setAttribute('name', `questions[${subIndex}][choices][${this.uindex}][type]`)

                dest = source.parentElement.previousElementSibling;
            }
            else {

                newQuestion.querySelector('[data-input-name="question"]')
                    ?.setAttribute('name', `questions[${this.nbQuestions}][content]`)

                newQuestion.querySelector('[data-input-name="comment"]')
                    ?.setAttribute('name', `questions[${this.nbQuestions}][comment]`)

                newQuestion.querySelector('[data-input-name="type"]')
                    ?.setAttribute('name', `questions[${this.nbQuestions}][type]`)

                newQuestion.querySelector('[data-input-name="min-choices"]')
                    ?.setAttribute('name', `questions[${this.nbQuestions}][min-choices]`)

                newQuestion.querySelector('[data-input-name="max-choices"]')
                    ?.setAttribute('name', `questions[${this.nbQuestions}][max-choices]`)

                dest = document.querySelector('.questionWrapper');

            }

            dest.append(newQuestion);
        }
    }
}