import log from "./log";
import * as riot from "riot";

export default class View {
    constructor() {
        this.title = document.getElementById("selector-top-title")
        this.zone = document.getElementById("selector-list-zone")
        this.path = document.getElementById("loc")
        this.etab = document.getElementById("etablanalytics-list")
        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 elem = document.createElement("selectorfragment")
                elem.onclick = () => {
                    this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
                }

                riot.mount(elem, {
                    name: e.name,
                    count: e.count,
                    idd: `menu0-${e.name}`
                }, "selectorfragment")

                this.zone.appendChild(elem)
            })
        }

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

    /**
     * Pour afficher en haut a gauche le chemin courant.
     * @param { string[] } path Chemin courant.
     * */
    renderPath(path) {
        this.path.innerHTML = ""
        let elem = document.createElement("locfragment")

        riot.mount(elem, {
            msg: path.filter(Boolean).join(" ► ")
        }, "locfragment")

        this.path.appendChild(elem)

        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 =
            "<tbody>" +
            "    <th>Nom</th>" +
            "    <th>Ville</th>" +
            "    <th>Departement</th>" +
            "    <th>Moyenne</th>" +
            "    <th>Selectivite</th>" +
            "</tbody>"

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