const UI = {
    CLASSNAMES: {
        EVENT: {
            ITEM: 'event-item',
            YEAR: 'event-year',
            FLAG: 'event-flag',
            LOCATION: 'event-location',
        },

        SORT: {
            ITEM: 'sort-item',
            TEXT: 'sort-text',
        },
    },

    DATA: {
        ROOT: 'data-root',
        EVENT: 'data-event-key',
        ROUND: 'data-round-key',
        SORT: 'data-sort-key',
    },

    findRoot: (node) => {
        while (node !== document.body && node.getAttribute(UI.DATA.EVENT) === null) {
            node = node.parentNode;
        }

        return node;
    },

    updateEventsPane: (eventKey) => {
        const events = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);

        events.forEach(node => {
            const classes = node.className.split(' ');
            classes.splice(1, classes.indexOf('active'));
            node.className = classes.join(' ');
        });

        const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
        activeEventNode.className += ' active';
    },

    updateRoundsPane: (rounds) => {
        const roundsDiv = document.querySelector('.rounds');

        while (roundsDiv.hasChildNodes()) {
            roundsDiv.firstChild.remove();
        }

        console.warn(rounds)

        rounds.forEach(round => {
            const item = document.createElement('div');
            item.className = 'round-item';
            item.setAttribute('data-round-id', round.roundId);

            const hide = document.createElement('div');
            hide.className = 'round-hide';
            hide.innerHTML = 'hide';

            const text = document.createElement('div');
            text.className = 'round-text';
            text.innerHTML = round.roundName;

            item.appendChild(text);
            item.appendChild(hide);
            roundsDiv.appendChild(item);
        });
    },

    buildEventsPane: (onClick) => {
        const eventsList = [
            { year: 1930, location: "Uruguay", icon: "uy" },
            { year: 1934, location: "Italy", icon: "it" },
            { year: 1938, location: "France", icon: "fr" },
            { year: 1954, location: "Switzerland", icon: "ch" },
            { year: 1958, location: "Sweden", icon: "se" },
            { year: 1962, location: "Chile", icon: "cl" },
            { year: 1966, location: "England", icon: "gb" },
            { year: 1970, location: "Mexico", icon: "mx" },
            { year: 1974, location: "West Germany", icon: "de" },
            { year: 1978, location: "Argentina", icon: "ar" },
            { year: 1982, location: "Spain", icon: "es" },
            { year: 1986, location: "Mexico", icon: "mx" },
            { year: 1990, location: "Italy", icon: "it" },
            { year: 1994, location: "USA", icon: "us" },
            { year: 1998, location: "France", icon: "fr" },
            { year: 2002, location: "Japan / South Korea", icon: "jp" },
            { year: 2006, location: "Germany", icon: "de" },
            { year: 2010, location: "Johannesburg", icon: "za" },
            { year: 2014, location: "Brazil", icon: "br" },
        ];

        const eventsDiv = document.querySelector('.events');

        while (eventsDiv.hasChildNodes()) {
            eventsDiv.firstChild.remove();
        }

        eventsList.forEach((evt) => {
            const item = document.createElement('div');
            const year = document.createElement('div');
            const location = document.createElement('div');
            const flag = document.createElement('div');
            const flagIcon = document.createElement('div');

            item.className = UI.CLASSNAMES.EVENT.ITEM;
            year.className = UI.CLASSNAMES.EVENT.YEAR;
            location.className = UI.CLASSNAMES.EVENT.LOCATION;
            flag.className = UI.CLASSNAMES.EVENT.FLAG;

            item.addEventListener('click', onClick);
            item.setAttribute(UI.DATA.EVENT, evt.year);

            year.innerHTML = evt.year;
            location.innerHTML = evt.location;
            flagIcon.className = `flag-icon flag-icon-${evt.icon}`;

            flag.appendChild(flagIcon);
            item.appendChild(flag);
            item.appendChild(year);
            item.appendChild(location);

            eventsDiv.appendChild(item);
        });
    },

    buildSortPane: (onClick) => {
        const sortList = [
            { text: 'Order by continent', value: null },
            { text: 'Order by goals scored', value: 'goals-scored' },
            { text: 'Order by country name', value: 'country-name' },
            { text: 'Order by country population', value: 'country-population' },
        ];

        const sortDiv = document.querySelector('.sort');

        while (sortDiv.hasChildNodes()) {
            sortDiv.firstChild.remove();
        }

        sortList.forEach(sort => {
            const item = document.createElement('div');
            const text = document.createElement('div');

            item.className = UI.CLASSNAMES.SORT.ITEM;
            item.addEventListener('click', onClick);
            item.setAttribute(UI.DATA.SORT, sort.value);

            text.className = UI.CLASSNAMES.SORT.TEXT;
            text.innerHTML = sort.text;

            item.appendChild(text);
            sortDiv.appendChild(item);
        });
    },

    buildRoundsPane: (onClick) => {
        // <div class="option-item inactive">
        //     <div class="option-text">Round Robin</div>
        //     <div class="option-toggle">Hide</div>
        // </div>
        //
        // <div class="option-item">
        //     <div class="option-text">Round of 16</div>
        //     <div class="option-toggle">Hide</div>
        // </div>
        //
        // <div class="option-item">
        //     <div class="option-text">Quarterfinals</div>
        //     <div class="option-toggle">Hide</div>
        // </div>
        //
        // <div class="option-item">
        //     <div class="option-text">Semifinals</div>
        //     <div class="option-toggle">Hide</div>
        // </div>
        //
        // <div class="option-item">
        //     <div class="option-text">Third Place</div>
        //     <div class="option-toggle">Hide</div>
        // </div>
        //
        // <div class="option-item">
        //     <div class="option-text">Final</div>
        //     <div class="option-toggle">Hide</div>
        // </div>

    },

    getRoundName: (name) => {
        const name2 = name.match(/^Matchday/) ? 'First round' : name;

        switch (name2) {
            case 'Preliminary round':
            case 'First round':
            case 'First round replays':
            case 'Group-1 Play-off':
            case 'Group-2 Play-off':
            case 'Group-3 Play-off':
            case 'Group-4 Play-off':
                return "Preliminaries";
            case 'Round of 16':
                return "Round of 16";
            case 'Quarter-finals':
            case 'Quarter-finals replays':
                return "Quarter Finals";
            case 'Semi-finals':
                return "Semi Finals";
            case 'Third place match':
            case 'Third-place match':
            case 'Match for third place':
            case 'Third place play-off':
            case 'Third-place play-off':
                return "Third Place Match";
            case 'Quarterfinals':
                return "Quarterfinals";
            case 'Semifinals':
                return "Semifinals";
            case 'Final':
            case 'Finals':
                return "Final";
        }

        console.error(`Unknown round name: ${name}`);
        return name;
    },
};