package net.keinekekse.app.books.ui

import kotlinx.html.*
import net.keinekekse.app.VERSION_books
import net.keinekekse.app.core.ui.cssFullscreen
import net.keinekekse.app.core.ui.stdHead

fun FlowContent.programName() {

    a(classes = "flex flex-nowrap text-nowrap") {
        href = navBooks.second
        title = "v ${VERSION_books.fullVersion}"

        img(classes = "h-8 md:h-14 my-2 $bgHeaderIcon") {
            src = "/static/books.png"
        }
        div(classes = "self-center text-right ml-3") {
            div {
                div(classes = "text-xl md:text-3xl") {
                    +VERSION_books.displayName
                }
                div(classes = "text-xs") {
                    +VERSION_books.version
                }
            }
        }
    }
}

fun HTML.booksPage(title: String, breadcrumbs: Map<String, String>, block: DIV.() -> Unit = {}) {
//    val booksDb = Dependencies.getBooksDb()
    LOG.info(" ### building test page")

//    var breadcrumbMap = emptyMap<String, String>()
//    if (breadcrumbs.isEmpty()) {
//        breadcrumbMap = breadcrumbs.plus(Pair("Start", ""))
//    } else {
//        breadcrumbMap = mapOf(Pair("Start", "/books")).plus(breadcrumbs)
//    }
    head {
        stdHead(title)
    }

    body {
        // page
        div(classes = "$cssFullscreen flex-col $textBody") {
            // header
            div(classes = "flex flex-row justify-between py-2 px-5 $bgHeader $textHeader") {
                // header left
                div(classes = "flex flex-row") {
                    programName()
                    div(classes = "ml-10 flex self-end pr-5 pt-2 border-t-1 items-baseline") {
                        a(classes = cssHeaderLink) {
                            href = "/"
                            materialSymbol("home")
//                            +"Start"
                        }
                        div(classes = "px-3") { +">" }

                        breadcrumbs.forEach { (name, url) ->
                            if (url.isNotEmpty()) {
                                a(classes = cssHeaderLink) {
                                    href = url
                                    +name
                                }
                                div(classes = "px-3") { +">" }
                            } else {
                                div {
                                    +name
                                }
                            }
                        }
                    }
                }
                // header right TODO nötig?
//                div(classes = "flex") {
//                    div(classes = "self-center text-xl") {
//                        materialSymbol("Settings")
//                    }
//                }
            }

            div(classes = "flex flex-row flex-auto overflow-hidden $bgBody") {

                block()

            }

            // footer
            div(classes = "p-1 text-sm $bgFooter") {
                div(classes = "col") {
                    +"some footer content"
                }
            }
        }
    }
}