class PasswordGenerator extends HTMLElement {
    constructor() {
        super();        

        const outValue = document.createElement("input");
        outValue.type = "text";
        this.appendChild(outValue);

        const lineBreak = document.createElement("br");
        this.appendChild(lineBreak);

        const pwlen = document.createElement("input");
        pwlen.type = "range";
        pwlen.min = "8";
        pwlen.max = "128";
        pwlen.value = "32";
        this.appendChild(pwlen);

        const pwlenSpan = document.createElement("span");
        pwlenSpan.innerText = "32";
        this.appendChild(pwlenSpan);

        const lineBreak2 = document.createElement("br");
        this.appendChild(lineBreak2);

        const includeNum = document.createElement("input");
        includeNum.type = "checkbox";
        includeNum.checked = true;
        this.appendChild(includeNum);

        const includeNumText = document.createTextNode(" Zahlen");
        this.appendChild(includeNumText);

        const lineBreak3 = document.createElement("br");
        this.appendChild(lineBreak3);

        const includeBigChar = document.createElement("input");
        includeBigChar.type = "checkbox";
        includeBigChar.checked = true;
        this.appendChild(includeBigChar);

        const bigCharText = document.createTextNode(" Großbuchstaben");
        this.appendChild(bigCharText);

        const lineBreak4 = document.createElement("br");
        this.appendChild(lineBreak4);

        const includeSmallChar = document.createElement("input");
        includeSmallChar.type = "checkbox";
        includeSmallChar.checked = true;
        this.appendChild(includeSmallChar);

        const includeSmallCharText = document.createTextNode(" Kleinbuchstaben");
        this.appendChild(includeSmallCharText);

        const lineBreak5 = document.createElement("br");
        this.appendChild(lineBreak5);

        const includeSpecialChar = document.createElement("input");
        includeSpecialChar.type = "checkbox";
        includeSpecialChar.checked = true;
        this.appendChild(includeSpecialChar);

        const inclideSpecialCharText = document.createTextNode(" Sonderzeichen");
        this.appendChild(inclideSpecialCharText);

        const lineBreak6 = document.createElement("br");
        this.appendChild(lineBreak6);

        const button = document.createElement("button");
        button.innerText = "Generieren";
        this.appendChild(button);

        pwlen.oninput = () => {
            pwlenSpan.innerText = pwlen.value;
            button.click();
        }

        includeNum.onchange = () => {
            button.click();
        }
        includeBigChar.onchange = () => {
            button.click();
        }
        includeSmallChar.onchange = () => {
            button.click();
        }
        includeSpecialChar.onchange = () => {
            button.click();
        }

        button.onclick = () => {
            let possibleChar = "";
            let password = "";

            if(includeNum.checked) {
                possibleChar += "1234567890";
            }
            if(includeBigChar.checked) {
                possibleChar += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            }
            if(includeSmallChar.checked) {
                possibleChar += "abcdefghijklmnopqrstuvwxyz";
            }
            if(includeSpecialChar.checked) {
                possibleChar += ",;.:-_#'+*?=)(/&%$§\"!°{[]}<>|~"
            }

            for(let i = 0; i < pwlen.value; i++) {
                password += possibleChar[Math.floor(Math.random() * possibleChar.length)];
            }

            outValue.value = password;
        }

        button.click();
    }
}

customElements.define("jl-pwgen", PasswordGenerator)