@file:OptIn(ExperimentalKtorApi::class)

package net.keinekekse.app.books.ui

import io.ktor.htmx.*
import io.ktor.htmx.html.*
import io.ktor.util.logging.*
import io.ktor.utils.io.*
import kotlinx.html.*
import net.keinekekse.app.core.config.LOGOUT_PATH
import org.jetbrains.exposed.v1.jdbc.Database
import kotlin.random.Random

val LOG = KtorSimpleLogger("net.keinekekse.app.books.ui.TestPage")

//fun FlowContent.programName() {
//
//    a(classes = "flex") {
//        href = "/"
//        title = "v ${VERSION_books.fullVersion}"
//
//        img(classes = "h-14 my-2 $bgHeaderIcon") {
//            src = "/static/books.png"
//        }
//        div(classes = "self-center text-right ml-3") {
//            div {
//                div(classes = "text-3xl") {
//                    +VERSION_books.displayName
//                }
//                div(classes = "text-xs") {
//                    +VERSION_books.version
//                }
//            }
//        }
//    }
//}
//
//fun HTML.testPage(booksDb: Database) {
////    val booksDb = Dependencies.getBooksDb()
//    LOG.info(" ### building test page")
//
//    head {
//        stdHead("Test Page")
//    }
//
//    body {
//        // page
//        div(classes = "$cssFullscreen flex-col") {
//            // 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-center") {
//                        +"MENÜ"
//                    }
//                }
//                // header right
//                div(classes = "flex") {
//                    div(classes = "self-center text-xl") {
//                        materialSymbol("Settings")
//                    }
//                }
//            }
fun HTML.testPage(booksDb: Database) {
    booksPage("Books-DB", mapOf(Pair(navBooks.first, ""))) {
        // content left
        div(classes = "basis-64 px-1 py-2 text-center $bgLeftColumn") {
            div {
                +"some content on the left "
            }
            div {
                button(classes = "$cssButtonStd m-2") {
                    attributes.hx {
                        // TODO
                        get = "/books/testdb"
                        target = "#testdb"
                        swap = HxSwap.innerHtml
                        trigger = "click"
                    }
                    +"DB test"
                }
            }
            div {
                button(classes = "$cssButtonPri m-2 focus:outline-none focus:outline-orange-800") {
                    +"primary button"
                }
            }
            div {
                +"text text "
                button(classes = "$cssLinkText ") { +"click me" }
                +" test test"
            }
            div {
                button(classes = "$cssButtonSec m-2") { +"secondary button" }
            }
            div {
                +"Database: ${booksDb.vendor} ${booksDb.version}"
            }
            div {
                form(action = LOGOUT_PATH, method = FormMethod.post) {
                    button(classes = cssLinkText) {
                        type = ButtonType.submit
                        +"Logout"
                    }
                }
            }
            div {
                id = "testdb"
            }
            div(classes = "mt-6") {

//                        script {
//                            unsafe {
//                                raw(
//                                    """
//                                    function toggleField(hideObj,showObj){
//                                        hideObj.disabled=true;
//                                        hideObj.style.display='none';
//                                        showObj.disabled=false;
//                                        showObj.style.display='inline';
//                                        showObj.focus();
//                                    }
//                                """.trimIndent()
//                                )
//                            }
//
//                        }

                // fkt. nur so lala (onBlur!), lässt sich das hinbiegen?
//                        form {
//                            attributes.hx {
//                                post = "/books/testform"
//                                target = "#testForm"
//                                swap = HxSwap.innerHtml
//                            }
//                            name = "BrowserSurvey"
//                            select {
//                                name = "browser"
//                                onChange = """
//                                    if(this.options[this.selectedIndex].value=='customOption'){
//                                        toggleField(this,this.nextSibling);
//                                        this.selectedIndex='0';
//                                    }
//                                """.trimIndent()
//                                label { +"Browser: " }
//                                option {
//                                    value = "customOption"
//                                    +"[type a custom value]"
//                                }
//                                option {
//                                    value = "vChrome"
//                                    +"Chrome"
//                                }
//                                option {
//                                    value = "vFirefox"
//                                    +"Firefox"
//                                }
//                                option {
//                                    value = "vInternetExplorer"
//                                    +"Internet Explorer"
//                                }
//                                option {
//                                    value = "vOpera"
//                                    +"Opera"
//                                }
//                            }
//                            input {
//                                type = InputType.text
//                                name = "browser"
//                                style = "display:none;"
//                                disabled = true
//                                onBlur = """
//                                    if(this.value==null || this.value==''){toggleField(this,this.previousSibling);}
//                                    """.trimIndent()
//                            }
//                            input(type = InputType.submit) {
//                                value = "Submit"
//                            }
//                        }

                // klappt, es fehlt halt die "value" -> alpha search ?!
                form {
                    attributes.hx {
                        post = "/books/testform"
                        target = "#testForm"
                        swap = HxSwap.innerHtml
                    }
                    input(
                        classes = cssTextInput,
                        type = InputType.text
                    ) {
                        name = "testInput"
                        list = "lst"
                        minLength = "2"

                        dataList {
                            id = "lst"
                            option(content = "alpha")
                            option(content = "beta")
                            option(content = "gamma")
                        }
                    }
                    input(type = InputType.submit) {
                        value = "Submit"
                    }
                }
                div {
                    id = "testForm"
                }
            }
        }
        // content right
        div(classes = "flex flex-auto $bgBody") {
            div(classes = "flex flex-col flex-auto") {
//                div {
//                    +"some heading"
//                }
                testTable()
            }
        }
    }
}
//            // footer
//            div(classes = "p-1 text-sm $bgFooter") {
//                div(classes = "col") {
//                    +"some footer content"
//                }
//            }
//        }
////        }
//
//    }
//}

fun FlowContent.testTable() {
    div(classes = "flex-auto overflow-auto px-1 pb-1 w-0 min-w-1/1") {
        table {
            id = "testtable"
            thead(classes = "$cssFixedTHead ") {
                tr {
                    th(classes = "py-3 px-2") { +"#" }
                    th(classes = "py-3 px-2") { +"Alias0" }
                    th(classes = "py-3 px-2") { +"Score0" }
                    th(classes = "py-3 px-2") { +"Alias1" }
                    th(classes = "py-3 px-2") { +"Score1" }
                    th(classes = "py-3 px-2") { +"Alias2" }
                    th(classes = "py-3 px-2") { +"Score2" }
                    th(classes = "py-3 px-2") { +"Alias3" }
                    th(classes = "py-3 px-2") { +"Score3" }
                    th(classes = "py-3 px-2") { +"Alias4" }
                    th(classes = "py-3 px-2") { +"Score4" }
                    th(classes = "py-3 px-2") {
                        a {
                            href = navBooksNew.second
                            title = navBooksNew.first
                            materialSymbolButton(
                                "auto_stories",
                                "font-weight: bold; font-size: 2em"
                            )
                            // library_add
                        }
                    }
                }
            }
            tbody {
                for (i in 0..100) {
                    tr {
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +i.toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1") {
                            +Random.nextLong().toString()
                        }
                        td(classes = "border-t-1 $borderTable px-2 py-1 text-nowrap") {
                            materialSymbolButton("Edit")
                            materialSymbolButton("Delete")
                        }
                    }
                }
            }
        }
    }
}