const fetch = (url) => new Promise((resolve, reject) => {
    const listener = ({ srcElement: req }) => {
        req.status === 200 ? resolve(req.responseText) : reject("busted");
    };

    const req = new XMLHttpRequest();
    req.addEventListener('load', listener);
    req.open('GET', url);
    req.send();
});

const main = {
    changeEvent: (evt) => {
        let target = evt.target;
        while (target !== document.body && target.getAttribute(UI.DATA.EVENT) === null) {
            target = target.parentNode;
        }

        main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
        main.updateUI();
    },

    changeRound: (evt) => {
        main.setState({ round: evt.year });
        main.updateUI();
    },

    changeSort: (evt) => {
        main.setState({ sort: evt.year });
        main.updateUI();
    },

    generateUI: () => {
        UI.buildEventsPane(main.changeEvent);
        // UI.buildSortPane(main.changeSort);
        // UI.buildSortPane(main.changeRound);
    },

    updateUI: () => {
        const state = main.getState();

        UI.updateEventsPane(state.eventKey);
        // UI.updateRounds(state);
        // UI.updateSort(state);

        const matrix = Matrices.buildMatrix(main.json, state.eventKey);
        Diagram.clear();
        Diagram.build(main.json, state.eventKey, matrix);
    },

    initJSON: (strData) => {
        main.json = JSON.parse(strData);
    },

    getState: () => {
        const params = window.location.href.split('?')[1];

        if (!params) {
            return {};
        }

        return params.split('&').reduce((acc, v) => {
            const tmp = v.split('=');
            acc[tmp[0]] = tmp[1];
            return acc;
        }, {});
    },

    setState: (next) => {
        const prev = main.getState();
        const url = window.location.href.split('?')[0];

        const eventKey = next.eventKey || prev.eventKey;
        const round = next.round || prev.round || null;
        const sort = next.sort || prev.sort || null;

        history.pushState(null, null, `${url}?eventKey=${eventKey}&sort=${sort}&round=${round}`);
    },
}

fetch('worldcup.json')
    .then(main.initJSON)
    .then(main.setState.call(null, { sort: null, eventKey: "1930" }))
    .then(main.generateUI)
    .then(main.updateUI);