import $ from "jquery";
import { DAL } from "../DAL/systemInfo";

class Menu {
    private navBar: HTMLElement = document.getElementById("navbar")!;
    private initialized: boolean = false;
    private filteredHostname: string[] =[];
    private filterUpdatedHandlers: (()=>void)[] = [];

    public async init(): Promise<void> {
        if (this.initialized)
            return Promise.resolve();
        (document.getElementById("navbar-hostfilter")!).addEventListener("change", evt => {
            this.checkFilters(evt.target as HTMLSelectElement);
        });
        await this.reload();
        this.initialized = true;
    }

    public addFilterEventListener(handler: ()=>void) {
        this.filterUpdatedHandlers.push(handler);
    }

    private checkFilters(selectElement: HTMLSelectElement) {
        this.filteredHostname = Array.from(selectElement.children).filter(x => (x as HTMLOptionElement).selected).map(x => (x as HTMLOptionElement).value);
        for (var i of this.filterUpdatedHandlers)
            i();
    }

    private async reload(): Promise<void> {
        let hostFilter: HTMLElement = document.getElementById("navbar-hostfilter")!;
        hostFilter.textContent = "";
        for (let host of await DAL.SystemInfo.listHosts()) {
            let htmlChild: HTMLOptionElement = document.createElement("option");
            htmlChild.value = host;
            htmlChild.textContent = host;
            hostFilter.appendChild(htmlChild);
        }
        $("#navbar-hostfilter").selectpicker("refresh");
        $("#navbar-hostfilter").selectpicker("selectAll");
    }

    public async show(): Promise<void> {
        this.navBar.classList.remove("hidden");
        return this.init();
    }

    public hide() {
        this.navBar.classList.add("hidden");
    }

    public getFilteredHostnames(): string[] {
        return this.filteredHostname;
    }
}

export default new Menu();