// Obliczanie
class Obliczanie extends HTMLElement {
    elementy = {};
    dzialanie = "";
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
    }

    wylicz() {
        let operacja = this.dzialanie;
        let pelne = true;
        for (const znak in this.elementy)
        {
            const element = this.shadow.getElementById(znak);
            if (element == null || element.value == "") {
                pelne = false;
                continue;
            }
            operacja = operacja.replaceAll(znak, element == null ? "" : element.value);
        }
        if (!pelne) {
            this.wynik.innerText = operacja;
            return;
        }
        try {
            this.wynik.innerText = eval(operacja);
        } catch {
            this.wynik.innerText = "Nieprawidłowa operacja";
        }
    }

    connectedCallback() {
        const styl = document.createElement("style");
        styl.textContent = `
            @import url('/assets/css/baza.css');
        `;

        this.dzialanie = this.getAttribute("dzialanie") ?? "";
        if (this.dzialanie == "") {
            this.shadow.innerHTML = "<h1>Nieustawione działanie!</h1>";
            return;
        }

        let html = this.dzialanie;
        const matche = this.dzialanie.match(/[a-z]/gi);
        if (matche != null) {
            matche.forEach(znak => {
                if (!this.elementy[znak]) {
                    this.elementy[znak] = true;
                    const element = document.createElement("input");
                    element.id = znak;
                    html = html.replaceAll(znak, element.outerHTML);
                }
            })
        }
            
        this.wynik = document.createElement("span");
        this.shadow.innerHTML = html + " = ";
        this.shadow.appendChild(this.wynik);
        this.shadow.appendChild(styl);

        for (const child of this.shadow.children) {
            if (child.id != "") {
                child.type = "number";
                child.oninput = () => {
                    this.wylicz();
                }
            }
        }
        this.wylicz();
    }
};

customElements.define("obliczanie-comp", Obliczanie);