const UI = {
    CLASSNAMES: {
        TOURNEY: {
            IMAGE: 'tourney-image',
            COUNTRY: 'tourney-country',
            YEAR: 'tourney-year',
        },
        EVENT: {
            ITEM: 'event-item',
            YEAR: 'event-year',
            FLAG: 'event-flag',
        },

        SCHEME: {
            SCHEME1: 'scheme-item scheme1',
            SCHEME2: 'scheme-item scheme2',
            SCHEME3: 'scheme-item scheme3',
            SCHEME4: 'scheme-item scheme4',
        },

        SORT: {
            ICON: 'sort-icon',
            ITEM: 'sort-item',
            TEXT: 'sort-text',
            TINY: 'sort-tiny',
        },

        ROUND: {
            ICON: 'round-icon',
            ITEM: 'round-item',
            TEXT: 'round-text',
            TINY: 'round-tiny',
        },
    },

    SORT_TYPES: {
        GOALS: 'goals',
        COUNTRY: 'country',
        POPULATION: 'population',
    },

    ROUND_TYPES: {
        PRELIM: '1',
        ROUNDOF16: '2',
        QUARTERFINAL: '3',
        SEMIFINAL: '4',
        CONSOLATION: '5',
        FINAL: '6',
    },

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

    I18N: {
        HIDE: 'hide',
        SHOW: 'show',
    },

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

        return node;
    },

    clearActive: (nodes) => {
        nodes.forEach(node => {
            const classes = node.className.split(' ');
            const i = classes.indexOf('active');

            if (i !== -1) {
                classes.splice(i, 1);
                node.className = classes.join(' ');
            }
        });
    },

    updateTourneyPane: (eventKey) => {
        const tourneyList = {
            '1930': "Uruguay",
            '1934': "Italy",
            '1938': "France",
            '1950': "Brazil",
            '1954': "Switzerland",
            '1958': "Sweden",
            '1962': "Chile",
            '1966': "England",
            '1970': "Mexico",
            '1974': "West Germany",
            '1978': "Argentina",
            '1982': "Spain",
            '1986': "Mexico",
            '1990': "Italy",
            '1994': "USA",
            '1998': "France",
            '2002': "Japan / South Korea",
            '2006': "Germany",
            '2010': "Johannesburg",
            '2014': "Brazil",
        };

        const ek = (tourneyList[eventKey] === undefined ? null : eventKey);
        const href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`;

        const tourneyPane = document.querySelector('.tourney');

        tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`;

        tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek];
        tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).href = href;

        tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek;
        tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).href = href;
    },

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

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

    updateRoundsPane: (roundsToShow, allRounds) => {
        const roundsItems = document.querySelectorAll(`.${UI.CLASSNAMES.ROUND.ITEM}`);
        UI.clearActive(roundsItems);

        roundsItems.forEach(item => {
            const type = item.getAttribute(UI.DATA.ROUND);
            const tiny = item.querySelector(`.${UI.CLASSNAMES.ROUND.TINY}`);
            tiny.innerHTML = UI.I18N.SHOW;

            if (roundsToShow.indexOf(type) > -1) {
                item.className += ' active';
                tiny.innerHTML = UI.I18N.HIDE;
            }
        });

        const ribbons = document.querySelectorAll('.ribbon');
        ribbons.forEach(ribbon => {
            const name = allRounds[ribbon.getAttribute("data-round-id")];
            const type = UI.getRoundType(name);

            roundsToShow.indexOf(type) === -1
                ? ribbon.style.display = 'none'
                : ribbon.style.display = 'inline';
        });
    },

    updateSchemePane: (scheme) => {
        const schemeItems = document.querySelectorAll('.scheme-item');
        UI.clearActive(schemeItems);

        schemeItems.forEach(node => {
            if (node.getAttribute(UI.DATA.SCHEME) === scheme) {
                node.className += ' active';
            }
        });
    },

    updateSortPane: (sort) => {
        const sortItems = document.querySelectorAll('.sort-item');
        UI.clearActive(sortItems);

        sortItems.forEach(node => {
            if (node.getAttribute(UI.DATA.SORT) === sort) {
                node.className += ' active';
            }
        });
    },

    buildTourneyPane: () => {
        const img = document.createElement('img');
        const country = document.createElement('a');
        const year = document.createElement('a');

        img.className = UI.CLASSNAMES.TOURNEY.IMAGE;

        country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
        country.target = '_blank';

        year.className = UI.CLASSNAMES.TOURNEY.YEAR;
        year.target = '_blank';

        const tourneyPane = document.querySelector('.tourney');

        tourneyPane.appendChild(img);
        tourneyPane.appendChild(year);
        tourneyPane.appendChild(country);
    },

    buildEventsPane: (onClick) => {
        const eventsList = [
            { year: 1930, icon: "uy" },
            { year: 1934, icon: "it" },
            { year: 1938, icon: "fr" },
            { year: 1950, icon: "br" },
            { year: 1954, icon: "ch" },
            { year: 1958, icon: "se" },
            { year: 1962, icon: "cl" },
            { year: 1966, icon: "gb" },
            { year: 1970, icon: "mx" },
            { year: 1974, icon: "de" },
            { year: 1978, icon: "ar" },
            { year: 1982, icon: "es" },
            { year: 1986, icon: "mx" },
            { year: 1990, icon: "it" },
            { year: 1994, icon: "us" },
            { year: 1998, icon: "fr" },
            { year: 2002, icon: "jp" },
            { year: 2006, icon: "de" },
            { year: 2010, icon: "za" },
            { year: 2014, 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 flag = document.createElement('div');

            item.className = UI.CLASSNAMES.EVENT.ITEM;
            item.addEventListener('click', onClick);
            item.setAttribute(UI.DATA.EVENT, evt.year);
            item.setAttribute(UI.DATA.ROOT, true);

            year.className = UI.CLASSNAMES.EVENT.YEAR;
            year.innerHTML = evt.year;

            flag.className = `${UI.CLASSNAMES.EVENT.FLAG} flag-icon flag-icon-${evt.icon}`;

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

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

    buildSortPane: (onClick) => {
        const sortList = [
            { text: 'Default', value: null },
            { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS },
            { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY },
            // { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
        ];

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

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

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

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

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

            tiny.className = UI.CLASSNAMES.SORT.TINY;
            tiny.innerHTML = 'sort';

            icon.className = UI.CLASSNAMES.SORT.ICON;
            icon.src = 'res/sort.svg';

            item.appendChild(icon);
            item.appendChild(text);
            item.appendChild(tiny);

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

    buildSchemePane: (onClick) => {
        const schemePane = document.querySelector('.schemes');

        const scheme1 = document.createElement('div');
        const scheme2 = document.createElement('div');
        const scheme3 = document.createElement('div');
        const scheme4 = document.createElement('div');

        scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
        scheme1.setAttribute(UI.DATA.SCHEME, 1);
        scheme1.addEventListener('click', onClick);
        scheme1.setAttribute(UI.DATA.ROOT, true);

        scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
        scheme2.setAttribute(UI.DATA.SCHEME, 2);
        scheme2.addEventListener('click', onClick);
        scheme2.setAttribute(UI.DATA.ROOT, true);

        scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
        scheme3.setAttribute(UI.DATA.SCHEME, 3);
        scheme3.addEventListener('click', onClick);
        scheme3.setAttribute(UI.DATA.ROOT, true);

        scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
        scheme4.setAttribute(UI.DATA.SCHEME, 4);
        scheme4.addEventListener('click', onClick);
        scheme4.setAttribute(UI.DATA.ROOT, true);

        schemePane.appendChild(scheme1);
        schemePane.appendChild(scheme2);
        schemePane.appendChild(scheme3);
        schemePane.appendChild(scheme4);
    },

    buildRoundsPane: (onClick) => {
        const roundsList = [
            { text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM },
            { text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 },
            { text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL },
            { text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL },
            { text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION },
            { text: 'Final', value: UI.ROUND_TYPES.FINAL },
        ];

        const roundsDiv = document.querySelector('.rounds');

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

        roundsList.forEach(round => {
            const icon = document.createElement('img');
            const item = document.createElement('div');
            const text = document.createElement('div');
            const tiny = document.createElement('div');

            item.className = UI.CLASSNAMES.ROUND.ITEM;
            item.addEventListener('click', onClick);
            item.setAttribute(UI.DATA.ROUND, round.value);
            item.setAttribute(UI.DATA.ROOT, true);

            tiny.className = UI.CLASSNAMES.ROUND.TINY;
            tiny.innerHTML = 'hide';

            text.className = UI.CLASSNAMES.ROUND.TEXT;
            text.innerHTML = round.text;

            icon.className = UI.CLASSNAMES.ROUND.ICON;
            icon.src = 'res/check.svg';

            item.appendChild(icon);
            item.appendChild(text);
            item.appendChild(tiny);

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

    getRoundType: (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 UI.ROUND_TYPES.PRELIM;
            case 'Round of 16':
                return UI.ROUND_TYPES.ROUNDOF16;
            case 'Third place match':
            case 'Third-place match':
            case 'Match for third place':
            case 'Third place play-off':
            case 'Third-place play-off':
                return UI.ROUND_TYPES.CONSOLATION;
            case 'Quarterfinals':
            case 'Quarter-finals':
            case 'Quarter-finals replays':
                return UI.ROUND_TYPES.QUARTERFINAL;
            case 'Semifinals':
            case 'Semi-finals':
                return UI.ROUND_TYPES.SEMIFINAL;
            case 'Final':
            case 'Finals':
            case 'Final Round':
                return UI.ROUND_TYPES.FINAL;
        }

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

export default UI;