const KEYS = [
[
    "`1234567890-=",
    "qwertyuiop[]\\",
    "asdfghjkl;'",
    "zxcvbnm,./",
    "Shift#1,Alt#1,Space#5,Bksp#1,Enter#1"
],
[
    "~!@#$%^&*()_+",
    "QWERTYUIOP{}|",
    "ASDFGHJKL:'",
    "ZXCVBNM<>?"
],
[
    "`1234567890-=",
    "qwęrtyuióp[]\\",
    "ąśdfghjkl;'",
    "żźćvbńm,./"
],
[
    "~!@#$%^&*()_+",
    "QWĘRTYUIÓP{}|",
    "ĄŚDFGHJKL:'",
    "ŻŹĆVBŃM<>?"
]
];

class Keyboard {

    constructor() {
        this.scr = null;
        this.mode = 0;
        this.shiftMode = 0;
        this.altMode = 0;
        this.keys = new Array(5).fill(0).map(() => document.createElement('div'));
        this.keys.forEach((div, row) => {
           if(row != 4) for(let i = 0; i < KEYS[0][row].length; ++i) {
                const btn = document.createElement('div');
                btn.className = 'button';
                btn.textContent = KEYS[0][row][i];
                btn.addEventListener('click', e => {
                    this.scr.textContent += e.target.textContent;
                    if(this.shiftMode === 1) {
                        this.shiftMode = 0;
                        this.mode = 0;
                        this.changeLayout();
                    }
                     if(this.altMode === 1) {
                        this.altMode = 0;
                        this.mode = 0;
                        this.changeLayout2();
                    }
                    if(this.altMode === 2 && this.shiftMode === 2) {
                             this.mode = 0;
                            this.changeLayout3();
                        }
                        if(this.altMode === 1 && this.shiftMode === 1) {
                            this.mode = 0;
                            this.changeLayout3();
                        }
                        if(this.altMode === 2 && this.shiftMode === 1) {
                            this.mode = 2;
                            this.changeLayout3();
                        }
                        if(this.altMode === 1 && this.shiftMode === 2) {
                            this.altMode = 1;
                            this.shiftMode = 2;
                            this.changeLayout3();
                        }
                        if(this.altMode === 0 && this.shiftMode === 2) {
                            this.mode = 1;
                            this.changeLayout2();
                        }
                        if(this.altMode === 2 && this.shiftMode === 0) {
                            this.mode = 2;
                            this.changeLayout2();
                        }
                 });
                div.appendChild(btn);
            }
            else {
                const keys = KEYS[0][row].split(',').map(k => k.split('#'));
                keys.forEach(key => {
                    const btn = document.createElement('div');
                    btn.className = 'button';
                    btn.textContent = key[0];
                    btn.style.flexGrow = key[1];
                    btn.addEventListener('click', e => {
                        const type = e.target.textContent.toLowerCase();

                        switch(type) {
                            case 'space':
                            this.scr.textContent += ' ';
                            break;

                            case 'enter':
                            this.scr.textContent += '\n';
                            break;

                            case 'bksp':
                            document.getElementById("gora").textContent = document.getElementById("gora").textContent.slice(0, -1);
                            break;

                            case 'shift':
                            this.shiftMode = ++this.shiftMode % 3;
                            this.mode = this.shiftMode > 0 ? 1 : 0;
                            this.keys[4].childNodes[0].className = this.shiftMode === 2 ? "button lock" : "button";
                            this.changeLayout();
                            break;

                            case 'alt':
                            this.altMode = ++this.altMode % 3;
                            this.mode = this.altMode > 0 ? 2 : 0;
                            this.keys[4].childNodes[1].className = this.altMode === 2 ? "button lock" : "button";
                            this.changeLayout2();
                            break;

                        }
                        if(this.shiftMode === 1 && type !== 'shift') {
                            this.mode = 0;
                            this.changeLayout();
                        }
                        if(this.altMode === 1 && type !== 'alt') {
                            this.mode = 0;
                            this.changeLayout2();
                        }
                        if(this.altMode === 2 && this.shiftMode === 2) {
                             this.mode = 0;
                            this.changeLayout3();
                        }
                        if(this.altMode === 1 && this.shiftMode === 1) {
                            this.mode = 0;
                            this.changeLayout3();
                        }
                        if(this.altMode === 2 && this.shiftMode === 1) {
                            this.mode = 2;
                            this.changeLayout3();
                        }
                        if(this.altMode === 1 && this.shiftMode === 2) {
                            this.altMode = 1;
                            this.shiftMode = 2;
                            this.changeLayout3();
                        }
                        if(this.altMode === 0 && this.shiftMode === 2) {
                            this.mode = 1;
                            this.changeLayout2();
                        }
                        if(this.altMode === 2 && this.shiftMode === 0) {
                            this.mode = 2;
                            this.changeLayout2();
                        }
                     });
                    div.appendChild(btn);
                });
            }
        });
    }

    changeLayout() {
        const keys = KEYS[this.mode];
            for(let r=0; r < 4; ++r) {
                this.keys[r].childNodes
                .forEach((key, i) => { key.textContent = keys[r][i];});
            }
    }
    changeLayout2() {
        const keys = KEYS[this.mode];
            for(let r=0; r < 4; ++r) {
                this.keys[r].childNodes
                .forEach((key, i) => { key.textContent = keys[r][i]});
            }
    }
    changeLayout3() {
        const keys = KEYS[3];
            for(let r=0; r < 4; ++r) {
                this.keys[r].childNodes
                .forEach((key, i) => { key.textContent = keys[r][i]});
            }
    }

    init() {
        this.scr = document.getElementById('gora');
        const cont = document.getElementById('klawiatura');
        this.keys.forEach(div => cont.appendChild(div));
    }

}

const klawiatura = new Keyboard();

window.addEventListener('DOMContentLoaded', () => klawiatura.init());