(function() {
    'use strict'
    const wordBank = document.getElementById('wordBank')
    ,     input    = document.getElementById('input')
    ,     listo    = document.getElementById('listo')
    let prev = null
    let word = null;

    ;[].forEach.call(
        document.querySelectorAll('[data-open]'),
        function (el, i, arr) {
            el.addEventListener('click', function (e) {
                const iam = Array.from(document.body.children).filter(el => !el.hidden)[0];
                iam.hidden = true;
                if (this.dataset.open === 'prev') {
                    prev.hidden = false;
                } else {
                    document.getElementById(this.dataset.open).hidden = false
                }
                prev = iam
            })
        }
    )

    ;[].forEach.call(
        document.querySelectorAll('[data-fire]'),
        function (el, i, arr) {
            el.addEventListener('click', function (e) {
                document.dispatchEvent(new Event(this.dataset.fire))
            })
        }
    )

    document.addEventListener('generate-words', function () {
        fetch('palabras.json')
            .then(x => x.json())
            .then(w => w.words)
            .then(function (words) {
                // console.log(words)
                wordBank.innerHTML = ''
                for (let word of words) {
                    let b = document.createElement('button')
                    b.classList.add('chip')
                    b.innerText = word.p
                    b.onclick = function () {
                        input.value = this.innerText;
                        input.dispatchEvent(new Event('input'))
                    }
                    wordBank.appendChild(b)
                }
            })
    })

    document.addEventListener('fs', e => {
        if (!screen.orientation.lock) return
        document
            .documentElement
            .requestFullscreen()
            .then(function () {
                screen.orientation.lock('landscape')
            })
    })
    document.addEventListener('view-word', e => {
        // Display the word in the h1
        const game = document.getElementById('game')
        game.querySelector('h1').innerText = word
    })

    input.addEventListener('input', e => {
        listo.disabled = !input.value.trim()
    });
    listo.addEventListener('click', (e) => {
        word = input.value.trim()
    });


}());