import m from "mithril"
import {Form, iForm} from "./widgets/form"
import { Input, iInput} from "./widgets/inputs"
import {Select, iSelect, iSelectOption} from "./widgets/select"
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
import {iCallLog, getCallLogsByProjektId, getNewCallLogId, addCallLogData, updateCallLogData} from "../models/call_log"
import {iKunde, getKunden} from "../models/kunde"
import {getProjekteByKundenId, getProjektById} from "../models/projekt"

function createCallLogTreenodes(projektId: number | null = null): iTreenode[] {
    let filteredLogs = getCallLogsByProjektId(projektId)

    return filteredLogs.map((log: iCallLog) => {
        return new Treenode(log, true, [])
    })
}

export const call_log_liste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = createCallLogTreenodes()
    let selectedNode: iTreenode | null = null
    let filterProjektId: number | null = null
    
    const handleRowMarked = (node: iTreenode) => {
        selectedNode = node
    }

    const addCallLogRoute = () => {
        const now = new Date()
        const datum = now.toISOString().split('T')[0]
        const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
        const params: any = {
            id: -1,
            datum: datum,
            uhrzeitBeginn: uhrzeit,
            dauer: "",
            betreff: "",
            nameAnsprechpartner: "",
            telefon: "",
            notiz: "",
            wiedervorlageDatum: "",
            erledigt: false
        }
        // Bei projektgefilterter Liste Kunde und Projekt vorbelegen.
        if (filterProjektId !== null) {
            const projekt = getProjektById(filterProjektId)
            if (projekt) {
                params.kundenName = projekt.kundenName
                params.projektId = projekt.id
                params.projektName = projekt.projektname
            }
        }
        m.route.set("/call_log", params)
    }
    
    const editCallLog = (log: iCallLog, e: Event) => {
        e.stopPropagation()
        m.route.set("/call_log", {
            id: log.id,
            kundenName: log.kundenName,
            projektId: log.projektId,
            projektName: log.projektName,
            datum: log.datum,
            uhrzeitBeginn: log.uhrzeitBeginn,
            dauer: log.dauer,
            betreff: log.betreff,
            nameAnsprechpartner: log.nameAnsprechpartner,
            telefon: log.telefon,
            notiz: log.notiz,
            wiedervorlageDatum: log.wiedervorlageDatum,
            erledigt: log.erledigt
        })
    }
    
    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
        let log: iCallLog = node.nodevalue
        const isSelected = selectedNode === node
        const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
        
        return [
            m("div", {style: cellStyle}, m("strong", log.kundenName + ": " + log.projektName)),
            m("span", {style: cellStyle}, log.datum),
            m("span", {style: cellStyle}, log.uhrzeitBeginn),
            m("span", {style: cellStyle}, log.dauer + " min"),
            m("span", {style: cellStyle}, log.betreff),
            m("span", {style: cellStyle}, log.wiedervorlageDatum),
            m("span", {style: cellStyle}, log.erledigt ? "Erledigt" : "Offen"),
            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit"))
        ]
    }
    
    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
        let log: iCallLog = node.nodevalue
        let searchLower = searchvalue.toLowerCase()
        return log.kundenName.toLowerCase().includes(searchLower) ||
               log.projektName.toLowerCase().includes(searchLower) ||
               log.datum.includes(searchLower) ||
               log.uhrzeitBeginn.toLowerCase().includes(searchLower) ||
               log.betreff.toLowerCase().includes(searchLower) ||
               log.nameAnsprechpartner.toLowerCase().includes(searchLower) ||
               log.notiz.toLowerCase().includes(searchLower) ||
               log.wiedervorlageDatum.includes(searchLower)
    }
    
    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams && routeParams.projektId) {
                filterProjektId = parseInt(routeParams.projektId)
            } else {
                filterProjektId = null
            }
            treenodes = createCallLogTreenodes(filterProjektId)
        },
        view: (vnode) => {
            return m("div.w3-container.w3-auto", {
                style: {
                    display: 'flex', 
                    'flex-direction': 'column', 
                    height: 'inherit', 
                    'overflow-y': 'inherit'}},
                m("h1", "Gesprächsnotizen"),
                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                    m(Treetable, 
                        {
                            treenodes: treenodes,
                            columnmapper: columnmapper,
                            filter: filterFunction,
                            onRowMarked: handleRowMarked
                        } as iTreetable,
                        m(TopbarButton, {onclick: addCallLogRoute, tooltip: "Neue Gesprächsnotiz anlegen"} as iTopbarButton,
                            m("i.material-icons", "add_call")
                        )
                    )
                )
            )
        }
    }
}

export const Call_Log: m.ClosureComponent = (vnode) => {
    // currentLog hält den Formularzustand. kundenId ist intern und wird über
    // das Projekt aufgelöst; kundenName/projektName dienen der Anzeige.
    let currentLog: {
        id: number
        kundenId: number
        kundenName: string
        projektId: number
        projektName: string
        datum: string
        uhrzeitBeginn: string
        dauer: string
        betreff: string
        nameAnsprechpartner: string
        telefon: string
        notiz: string
        wiedervorlageDatum: string
        erledigt: boolean
    } = {
        id: -1,
        kundenId: -1,
        kundenName: "",
        projektId: -1,
        projektName: "",
        datum: "",
        uhrzeitBeginn: "",
        dauer: "",
        betreff: "",
        nameAnsprechpartner: "",
        telefon: "",
        notiz: "",
        wiedervorlageDatum: "",
        erledigt: false
    }
    // Sind Kunde und Projekt voreingestellt (Liste wurde projektgefiltert
    // oder aus der Projektliste aufgerufen)?
    let kundeVoreingestellt: boolean = false

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams) {
                const projektId = routeParams.projektId ? parseInt(routeParams.projektId) : -1
                kundeVoreingestellt = projektId !== -1
                // kundenId aus dem Projekt ableiten, falls nicht direkt gesetzt.
                let kundenId = -1
                if (kundeVoreingestellt) {
                    const projekt = getProjektById(projektId)
                    if (projekt) { kundenId = projekt.kundenId }
                }
                currentLog = {
                    id: routeParams.id ? parseInt(routeParams.id) : -1,
                    kundenId: kundenId,
                    kundenName: routeParams.kundenName || "",
                    projektId: projektId,
                    projektName: routeParams.projektName || "",
                    datum: routeParams.datum || "",
                    uhrzeitBeginn: routeParams.uhrzeitBeginn || "",
                    dauer: routeParams.dauer || "",
                    betreff: routeParams.betreff || "",
                    nameAnsprechpartner: routeParams.nameAnsprechpartner || "",
                    telefon: routeParams.telefon || "",
                    notiz: routeParams.notiz || "",
                    wiedervorlageDatum: routeParams.wiedervorlageDatum || "",
                    erledigt: routeParams.erledigt === true || routeParams.erledigt === "true"
                }
            }
        },
        view: (vnode) => {
            // Select-Optionen aus Kunden- und Projektliste aufbauen.
            const kundenOptionen: iSelectOption[] = getKunden().map((k: iKunde) => {
                return {value: k.id, label: k.name}
            })
            // Projekt-Optionen sind vom gewählten Kunden abhängig.
            const projektOptionen: iSelectOption[] = getProjekteByKundenId(currentLog.kundenId).map((p) => {
                return {value: p.id, label: p.projektname}
            })
            return m("div.w3-container.w3-auto",
                m("h1", currentLog.id === -1 ? "Neue Gesprächsnotiz anlegen" : "Gesprächsnotiz"),
                m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
                    m("label", "Kunde",
                        m(Select, {
                            name: "kundenId",
                            value: currentLog.kundenId,
                            options: kundenOptionen,
                            readonly: kundeVoreingestellt,
                            required: true,
                            onchanged: (kundenId: number) => {
                                // Bei Kundenwechsel die kundenId übernehmen
                                // und projektId zurücksetzen, da die Projekte
                                // kundenabhängig sind.
                                currentLog.kundenId = kundenId
                                currentLog.projektId = -1
                            }
                        } as iSelect)),
                    m("label", "Projekt",
                        m(Select, {
                            name: "projektId",
                            value: currentLog.projektId,
                            options: projektOptionen,
                            readonly: kundeVoreingestellt,
                            required: true
                        } as iSelect)),
                    m("label", "Datum", m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
                    m("label", "Uhrzeit Beginn", m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
                    m("label", "Dauer (Minuten)", m(Input, {name: "dauer", value: currentLog.dauer, type: "number"} as iInput)),
                    m("label", "Betreff", m(Input, {name: "betreff", value: currentLog.betreff, type: "text"} as iInput)),
                    m("label", "Name Ansprechpartner", m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
                    m("label", "Telefon", m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput)),
                    m("label", "Notiz", m(Input, {name: "notiz", value: currentLog.notiz, type: "text"} as iInput)),
                    m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlageDatum", value: currentLog.wiedervorlageDatum, type: "date"} as iInput)),
                    m("label", m(Input, {name: "erledigt", type: "checkbox", value: currentLog.erledigt} as iInput), "Erledigt")
                ])
            )
        }
    }
}