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({name: " ", count: 0}, "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(
                        {
                            name: document.getElementById(`menu0-${e.name}`).innerText,
                            count: parseInt(document.getElementById(`menu0-${e.name}-count`).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.id = `menu0-${e.name}-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 { array[] } 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 = ""
        let table = document.createElement("table")
        let trow = document.createElement("tr")

        let th1 = document.createElement("th")
        th1.innerText = "Nom"

        let th2 = document.createElement("th")
        th2.innerText = "Ville"

        let th3 = document.createElement("th")
        th3.innerText = "Dpt"

        let th4 = document.createElement("th")
        th4.innerText = "Moyenne"

        let th5 = document.createElement("th")
        th5.innerText = "Selectivite"

        trow.appendChild(th1)
        trow.appendChild(th2)
        trow.appendChild(th3)
        trow.appendChild(th4)
        trow.appendChild(th5)
        table.appendChild(trow)


        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)

            table.appendChild(tr)
        })

        this.etab.appendChild(table)
    }

    /**
     * Envoyer dans le controlleur tous les events fait.
     * @param { {name: string, count: int} } 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 :(")
        }
    }
}