/** @ts-check */

class AccordionContent extends HTMLElement {
    constructor() {
        super();
        this.gridElement = document.createElement("div");
    }
    get content() {
        return this.gridElement;
    }
    connectedCallback() {
        // create a div that'll animate the collapsing
        this.gridElement.append(...Array.from(this.childNodes));
        this.gridElement.classList.add("accordion-animation-content");
        this.innerHTML = "";
        this.append(this.gridElement);
    }
}

class AccordionHeader extends HTMLElement {
    constructor() {
        super();
        console.log("contructor?");
        this.btn = document.createElement("button");
    }
    get html() {
        return this.btn.innerHTML;
    }
    set html(val) {
        this.btn.innerHTML = val;
    }
    get text() {
        return this.btn.innerText;
    }
    set text(val) {
        this.btn.innerText = val;
    }
    get parentBox() {
        return this.parentElement;
    }
    connectedCallback() {
        const childNodes = Array.from(this.childNodes);
        this.innerHTML = "";
        this.btn.append(...childNodes);
        this.append(this.btn);
        this.btn.addEventListener("click", this._btnClicked.bind(this));
    }
    _btnClicked() {
        this.parentBox?.toggle();
    }
}

class AccordionBox extends HTMLElement {
    constructor() {
        super();
    }
    get collapsed() {
        return this.hasAttribute("collapsed");
    }
    set collapsed(val) {
        if (val) {
            this.setAttribute("collapsed", "");
        } else {
            this.removeAttribute("collapsed");
        }
    }
    toggle() {
        this.collapsed = !this.collapsed;
    }
}

class Accordion extends HTMLElement {
    constructor() {
        super();
    }
}

window.customElements.define("main-accordion", Accordion);
window.customElements.define("accordion-box", AccordionBox);
window.customElements.define("accordion-header", AccordionHeader);
window.customElements.define("accordion-content", AccordionContent);

// Export types for use in index.js
const module = {};

module.exports = {
    AccordionBox,
    Accordion,
    AccordionContent,
    AccordionHeader,
};