import Form from "./form.js";

export default class View {
    constructor(element, forms, list) {
        this.element = element
        this.forms = this.element.querySelectorAll(forms)
        this.list = this.element.querySelector(list)
        this.observer = null

        this.connect()

        for (const form of this.forms) {
            new Form(form);
        }

    }

    connect() {
        this.observe(this.list)
    }

    observe(list, config = { attributes: true, childList: true, subtree: true }) {
        const callback = function (mutationList, observer) {
            mutationList.forEach(mutation => {
                switch(mutation.type) {
                    case 'childList':
                        if (mutation.target === list) {
                            mutation.addedNodes.forEach(node => {
                                if (node.children) {
                                    let potentialForm = node.children[0].children[0]
                                    if (potentialForm.nodeName === "FORM") {
                                        new Form(potentialForm, true);
                                    }
                                }
                            })
                        }
                        break;
                    case 'attributes':
                        /* An attribute value changed on the element in
                        mutation.target.
                        The attribute name is in mutation.attributeName, and
                        its previous value is in mutation.oldValue. */
                        break;
                }
            });
        };

        this.observer = new MutationObserver(callback);
        this.observer.observe(this.list, config);
    }

}