import m from "mithril"
import {Form, iForm} from "./widgets/form"
import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
import {iKontaktadresse, fetchKontaktadressen, fetchKontaktadresseById, createKontaktadresseREST, updateKontaktadresseREST} from "../models/kontaktadresse"
import {iProjekt, fetchProjektById} from "../models/projekt"
import {showServerError} from "./auth/authmessages"
import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"

export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = []
    let selectedNode: iTreenode | null = null
    let filterProjektId: number | null = null
    // Projektname für die Überschrift, asynchron per fetchProjektById
    // aufgelöst, falls nicht in den Route-Params enthalten.
    let projektName: string = ""
    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
    let breadcrumbs: iBreadcrumb[] = []

    const handleRowMarked = (node: iTreenode) => {
        selectedNode = node
    }

    // Eigener Listen-Crumb für die Breadcrumb-Kette.
    const ownCrumb = (): iBreadcrumb => ({
        route: "/kontaktadresseliste",
        params: filterProjektId !== null ? {projekt_id: filterProjektId} : {},
        label: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
    })

    const addKontaktadresseRoute = () => {
        const params: any = {id: -1}
        if (filterProjektId !== null) {
            params.projekt_id = filterProjektId
            params.projekt_name = projektName
        }
        // Breadcrumb-Kette um eigene Position erweitern.
        params.bc = serializeBc([...breadcrumbs, ownCrumb()])
        m.route.set("/kontaktadresse", params)
    }

    const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
        e.stopPropagation()
        // Breadcrumb-Kette um eigene Position erweitern.
        m.route.set("/kontaktadresse", {id: kontaktadresse.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
    }

    const addCallLog = (kontaktadresse: iKontaktadresse, e: Event) => {
        e.stopPropagation()
        const now = new Date()
        const datum = now.toISOString().split('T')[0]
        const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
        // Breadcrumb-Kette um Kontaktadressenliste und Notizliste
        // erweitern, da die Maske nach Speichern/Abbrechen in die
        // projektgefilterte Notizliste zurückkehrt.
        const chain = [...breadcrumbs, ownCrumb(), {
            route: "/calllogliste",
            params: {projekt_id: kontaktadresse.projekt_id},
            label: "Notizen: " + kontaktadresse.projekt_name
        } as iBreadcrumb]
        m.route.set("/call_log", {
            id: -1,
            projekt_id: kontaktadresse.projekt_id,
            projekt_name: kontaktadresse.projekt_name,
            // Kontaktadresse als Pflichtfeld an die Notizmaske durchreichen
            kontaktadresse_id: kontaktadresse.id,
            datum: datum,
            uhrzeit_beginn: uhrzeit,
            dauer: "",
            betreff: "",
            name_ansprechpartner: kontaktadresse.name,
            telefon: kontaktadresse.telefon,
            notiz: "",
            wiedervorlage_datum: "",
            erledigt: false,
            bc: serializeBc(chain)
        })
    }

    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
        let kontaktadresse: iKontaktadresse = node.nodevalue

        return [
            m("div", m("strong", kontaktadresse.name)),
            m("span", kontaktadresse.firma),
            m("span", kontaktadresse.position),
            m("span", kontaktadresse.telefon),
            m("span", kontaktadresse.email),
            m("span", kontaktadresse.ort),
            m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
                m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit")),
                m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: {padding: '0 2px'}, onclick: (e: Event) => addCallLog(kontaktadresse, e)}, m("i.material-icons", "add_call"))
            )
        ]
    }

    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
        let kontaktadresse: iKontaktadresse = node.nodevalue
        let searchLower = searchvalue.toLowerCase()
        return (kontaktadresse.name || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.firma || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.position || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.telefon || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.email || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.ort || "").toLowerCase().includes(searchLower) ||
               (kontaktadresse.projekt_name || "").toLowerCase().includes(searchLower)
    }

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams && routeParams.projekt_id) {
                filterProjektId = parseInt(routeParams.projekt_id)
                projektName = routeParams.projekt_name || ""
            } else {
                filterProjektId = null
                projektName = ""
            }
            // Breadcrumb-Kette aus Route-Param parsen.
            breadcrumbs = parseBc(routeParams && routeParams.bc)
            // Kontaktadressen asynchron vom Server laden. Die Filterung
            // nach projekt_id erfolgt serverseitig, sofern ein Filter
            // gesetzt ist.
            fetchKontaktadressen(filterProjektId !== null ? filterProjektId : undefined).then((result) => {
                treenodes = result.map((kontaktadresse: iKontaktadresse) => new Treenode(kontaktadresse, true, []))
            }).catch((e) => showServerError(e))
            // Projektnamen asynchron auflösen, falls nicht in Route-Params.
            if (filterProjektId !== null && projektName === "") {
                fetchProjektById(filterProjektId).then((projekt: iProjekt) => {
                    projektName = projekt.projektname
                }).catch((e) => showServerError(e))
            }
        },
        view: (vnode) => {
            return m("div.w3-container.w3-auto", {
                style: {
                    display: 'flex',
                    'flex-direction': 'column',
                    height: 'inherit',
                    'overflow-y': 'inherit'}},
                m("h1", projektName ? "Kontaktadressen für " + projektName : "Kontaktadressen"),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
                } as iBreadcrumbBar),
                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                    m(Treetable,
                        {
                            treenodes: treenodes,
                            columnmapper: columnmapper,
                            filter: filterFunction,
                            onRowMarked: handleRowMarked,
                            isSelected: (node: iTreenode) => node === selectedNode
                        } as iTreetable,
                        m(TopbarButton, {onclick: addKontaktadresseRoute, tooltip: "Neue Kontaktadresse anlegen"} as iTopbarButton,
                            m("i.material-icons", "person_add")
                        )
                    )
                )
            )
        }
    }
}

export const Kontaktadresse: m.ClosureComponent = (vnode) => {
    // currentKontaktadresse hält den Formularzustand. projekt_id referenziert
    // das Projekt eindeutig, projekt_name dient der Anzeige in der Überschrift.
    let currentKontaktadresse: {
        id: number
        projekt_id: number
        projekt_name: string
        anrede: string
        name: string
        firma: string
        position: string
        telefon: string
        email: string
        strasse: string
        plz: string
        ort: string
        land: string
        notiz: string
    } = {
        id: -1,
        projekt_id: -1,
        projekt_name: "",
        anrede: "",
        name: "",
        firma: "",
        position: "",
        telefon: "",
        email: "",
        strasse: "",
        plz: "",
        ort: "",
        land: "",
        notiz: ""
    }
    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
    let breadcrumbs: iBreadcrumb[] = []
    // Route-Params für die Rückkehr zur Kontaktadressenliste; als Closure
    // an den DirtyMaskHelper übergeben.
    const backParams = (): any => {
        const listBc = serializeBc(breadcrumbs.slice(0, -1))
        const params: any = {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}
        if (listBc) params.bc = listBc
        return params
    }
    // DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
    const guard = new DirtyMaskHelper("/kontaktadresseliste", backParams)

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
            // Breadcrumb-Kette aus Route-Param parsen.
            breadcrumbs = parseBc(routeParams && routeParams.bc)
            guard.registerGuard()
            if (id !== -1) {
                // Kontaktadresse frisch vom Server holen.
                fetchKontaktadresseById(id).then((result) => {
                    currentKontaktadresse = result
                }).catch((e) => showServerError(e))
            } else {
                // Neuanlegen: projekt_id und projekt_name aus Route-Params.
                currentKontaktadresse.projekt_id = routeParams && routeParams.projekt_id ? parseInt(routeParams.projekt_id) : -1
                currentKontaktadresse.projekt_name = routeParams && routeParams.projekt_name ? routeParams.projekt_name : ""
            }
        },
        onremove: (vnode) => {
            guard.cleanup()
        },
        view: (vnode) => {
            const submit = (form: HTMLFormElement): boolean => {
                const formData = new FormData(form)
                const gespeicherteKontaktadresse: iKontaktadresse = {
                    id: currentKontaktadresse.id,
                    projekt_id: currentKontaktadresse.projekt_id,
                    projekt_name: "",
                    anrede: (formData.get("anrede") as string) || "",
                    name: (formData.get("name") as string) || "",
                    firma: (formData.get("firma") as string) || "",
                    position: (formData.get("position") as string) || "",
                    telefon: (formData.get("telefon") as string) || "",
                    email: (formData.get("email") as string) || "",
                    strasse: (formData.get("strasse") as string) || "",
                    plz: (formData.get("plz") as string) || "",
                    ort: (formData.get("ort") as string) || "",
                    land: (formData.get("land") as string) || "",
                    notiz: (formData.get("notiz") as string) || "",
                    // Server-seitig dynamisch berechnet; Platzhalter beim Senden.
                    is_erledigt: false
                }
                if (currentKontaktadresse.id === -1) {
                    createKontaktadresseREST(gespeicherteKontaktadresse).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                } else {
                    updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                }
                return true
            }
            return m("div.w3-container.w3-auto.form-view-container",
                m("h1", currentKontaktadresse.id === -1
                    ? "Neue Kontaktadresse für " + currentKontaktadresse.projekt_name
                    : "Kontaktadresse-Stammblatt"),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: currentKontaktadresse.id === -1
                        ? "Neue Kontaktadresse"
                        : "Kontaktadresse-Stammblatt",
                    onnavigate: guardedNavigate
                } as iBreadcrumbBar),
                m("div", {style: {flex: '1', 'min-height': '0'}},
                    m(Form, guard.formAttrs(submit) as iForm, [
                    m("input", {type: "hidden", name: "projekt_id", value: currentKontaktadresse.projekt_id}),
                    m("label", "Anrede", m(Input, {name: "anrede", value: currentKontaktadresse.anrede, type: "text"} as iInput)),
                    m("label", "Name", m(Input, {name: "name", value: currentKontaktadresse.name, type: "text", required: true} as iInput)),
                    m("label", "Firma", m(Input, {name: "firma", value: currentKontaktadresse.firma, type: "text"} as iInput)),
                    m("label", "Position", m(Input, {name: "position", value: currentKontaktadresse.position, type: "text"} as iInput)),
                    m("label", "Telefon", m(Input, {name: "telefon", value: currentKontaktadresse.telefon, type: "tel"} as iInput)),
                    m("label", "E-Mail", m(Input, {name: "email", value: currentKontaktadresse.email, type: "email"} as iInput)),
                    m("label", "Straße", m(Input, {name: "strasse", value: currentKontaktadresse.strasse, type: "text"} as iInput)),
                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
                        m("label", {style: {flex: '0 0 120px'}}, "PLZ",
                            m(Input, {name: "plz", value: currentKontaktadresse.plz, type: "text"} as iInput)),
                        m("label", {style: {flex: '1'}}, "Ort",
                            m(Input, {name: "ort", value: currentKontaktadresse.ort, type: "text"} as iInput))
                    ),
                    m("label", "Land", m(Input, {name: "land", value: currentKontaktadresse.land, type: "text"} as iInput)),
                    m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontaktadresse.notiz, rows: 4} as iTextarea))
                    ])
                )
            )
        }
    }
}