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.etab = document.getElementById("etab")
        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 !")
    }

    /**
     * Pour afficher en haut a gauche le chemin courant.
     * @param { string[] } path Chemin courant.
     * */
    renderPath(path) {
        this.path.innerText = `${path[0]} / ${path[1]} / ${path[2]}`
        log("Loc->View",  `Chemin change ${path}`)
    }

    /**
     * Pour afficher en bas a gauche la liste.
     * @param { json } data La liste des etablissements.
     * */
    renderEtab(data) {
        this.etab.innerHTML =
            "<tr>" +
            "    <th>Nom</th>" +
            "    <th>Ville</th>" +
            "    <th>Dept</th>" +
            "    <th>Moyenne</th>" +
            "    <th>Selectivite</th>" +
            "</tr>"

        data.forEach((e) => {
            let etab = e.fields.g_ea_lib_vx
            let dept = e.fields.dep
            let city = e.fields.ville_etab
            let moy = "null"
            let selection = "null"

            let tr = document.createElement("tr")

            let td1 = document.createElement("td")
            td1.innerText = etab

            let td2 = document.createElement("td")
            td2.innerText = city

            let td3 = document.createElement("td")
            td3.innerText = dept

            let td4 = document.createElement("td")
            td4.innerText = moy

            let td5 = document.createElement("td")
            td5.innerText = selection

            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)

            this.etab.appendChild(tr)
        })
    }

    /**
     * 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 :(")
        }
    }
}