'use strict';

class AkiNavigatorTemplate {
    constructor(mode) {
        this._header = undefined;
        this._templates = undefined;
        this._routerOutlet = undefined;
        this._mode = mode;

        this._onExec();
    }

    _onExec() {
        console.log('Navigating using mode:', this._mode);

        this._getReferences();
        this._getTemplates();

        window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1)));

        if (!window.location.hash) {
            this._mode === 'fetch' ? this.displayView('home') : this.displayView('home');
        } else {
            this.displayView(window.location.hash.substr(1));
        }
    }

    _getReferences() {
        this._header = document.querySelector('header');
        this._routerOutlet = document.querySelector('#router-outlet');
    }

    _getTemplates() {
        this._templates = [].slice.call(document.getElementsByTagName('template'));
    }

    _viewModeAction() {
        if (this._mode === 'fetch') {
            this.fetchView(window.location.hash.substr(1))
        } else {
            this.setView(window.location.hash.substr(1));
        }
    }

    _removeChildren(element) {
        let count = element.childNodes.length;

        while (count--) {
            element.removeChild(element.lastChild);
        }
    }

    _setView(view) {
        const template = this._templates.filter(template => template.id === `template-${view}`)[0];
        this._removeChildren(this._routerOutlet);
        this._routerOutlet.appendChild(template.content.cloneNode(true));
    }

    async _fetchView(view) {
        const response = await fetch(`templates/${view}.html`);
        const text = await response.text();

        this._removeChildren(this._routerOutlet);
        this._routerOutlet.innerHTML = text; // innerHTML gets the job done.
    }

    displayView(view) {
        if (this._mode === 'fetch') {
            this._fetchView(view);
        } else {
            this._setView(view);
        }

        const activeLinks = document.querySelectorAll('a[active]');
        const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);

        if (activeLinks.length > 0) {
            activeLinks.forEach(link => {
                link.removeAttribute('active')
            });
        }

        newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));

        // FIXME: history push is fucked rn.
        // window.history.pushState(null, `${view}`, `#${view}`);
    }
}