import log from "./log";

export default class View {
    constructor() {
        this.title = document.getElementById("selector-top-title")
        this.zone = document.getElementById("selector-list-zone")
        this.path = document.getElementById("location")
        this.btn = document.getElementById("selector-top-btn")
        this.btn.onclick = () => {
            this.updateMenu("", "previous")
        }

        log("Selector",  "View 1/3")
    }

    /**
     * Contruction de la balise <li> qui vas se loger dans le menu.
     * <li>
     *     <a>Tous les noms des formations par section</a>
     *     <span>Combien de formations dispo ?</span>
     * </li>
     * @param data Donnees a afficher.
     * @param title Titre de la section d'un menu.
     * */
    renderMenu(title, data) {
        this.title.innerText = title
        this.zone.innerHTML = ""

        if(title || data) {
            data.forEach((e) => {
                let li = document.createElement("li")
                li.className = "selector-list-inner"
                li.onclick = () => {
                    this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
                }

                let name = document.createElement("a")
                name.innerText = e.name
                name.id = `menu0-${e.name}`
                name.className = "selector-list-names"

                let count = document.createElement("span")
                count.innerText = e.count
                count.className = "selector-list-counts"

                li.appendChild(name)
                li.appendChild(count)

                this.zone.appendChild(li)
            })
        }

        log("Selector->View",  "Donnees recuperer OK !")
    }

    renderPath(path) {
        this.path.innerText = `${path[0]} / ${path[1]} / ${path[2]}`
        log("Loc->View",  `Chemin change ${path}`)
    }

    /**
     * Envoyer dans le controlleur tous les events fait.
     * @param { string } selection Ce qu'on va utiliser pour le &refine.
     * @param { string } direction Retour en arriere ou aller en avant. { "previous", "next" }
     * */
    updateMenu(selection, direction) {
        if(direction) {
            window.updateModel(selection, direction)
        } else {
            log("Selector->View",  "Mince, le menu ne veut pas s'ouvrir :(")
        }
    }
}