package de.kif.frontend.views

import de.kif.frontend.iterator
import de.kif.frontend.launch
import de.kif.frontend.repository.WorkGroupRepository
import de.westermann.kobserve.event.EventListener
import de.westermann.kwebview.View
import de.westermann.kwebview.async
import de.westermann.kwebview.components.*
import de.westermann.kwebview.createHtmlView
import org.w3c.dom.*
import kotlin.browser.document

fun initWorkGroupConstraints() {
    var index = 10000

    val constraints =
       document.getElementsByClassName("work-group-constraints")[0] as HTMLElement
    val addButton =
        View.wrap(document.getElementsByClassName("work-group-constraints-add")[0] as HTMLElement)
    val addList =
        ListView.wrap<View>(document.getElementsByClassName("work-group-constraints-add-list")[0] as HTMLElement)

    addButton.onClick {
        addList.classList += "active"

        var listener: EventListener<*>? = null

        async {
            listener = Body.onClick.reference {
                addList.classList -= "active"
                listener?.detach()
            }
        }
    }

    addList.textView("Add only on day") {
        onClick {
            constraints.appendChild(View.wrap(createHtmlView<HTMLDivElement>()) {
                classList += "input-group"
                html.appendChild(TextView("On day").apply {
                    classList += "form-btn"
                    onClick { this@wrap.html.remove() }
                }.html)
                html.appendChild(InputView(InputType.NUMBER).apply {
                    classList += "form-control"
                    html.name = "constraint-only-on-day-${index++}"
                    min = -1337.0
                    max = 1337.0
                }.html)
            }.html)
        }
    }
    addList.textView("Add only after time") {
        onClick {
            constraints.appendChild(View.wrap(createHtmlView<HTMLDivElement>()) {
                classList += "input-group"
                html.appendChild(TextView("After time").apply {
                    classList += "form-btn"
                    onClick { this@wrap.html.remove() }
                }.html)
                html.appendChild(InputView(InputType.NUMBER).apply {
                    classList += "form-control"
                    html.name = "constraint-only-after-time-${index++}"
                    min = -1337.0
                    max = 133700.0
                }.html)
            }.html)
        }
    }
    addList.textView("Add not at same time") {
        onClick {
            constraints.appendChild(View.wrap(createHtmlView<HTMLDivElement>()) {
                classList += "input-group"
                html.appendChild(TextView("Not with").apply {
                    classList += "form-btn"
                    onClick { this@wrap.html.remove() }
                }.html)

                val select = createHtmlView<HTMLSelectElement>()
                select.classList.add("form-control")
                select.name = "constraint-not-at-same-time-${index++}"

                launch {
                    val all = WorkGroupRepository.all()

                    for (wg in all) {
                        val option = createHtmlView<HTMLOptionElement>()
                        option.value = wg.id.toString()
                        option.textContent = wg.name
                        select.appendChild(option)
                    }
                }

                html.appendChild(select)
            }.html)
        }
    }
    addList.textView("Add only after work group") {
        onClick {
            constraints.appendChild(View.wrap(createHtmlView<HTMLDivElement>()) {
                classList += "input-group"
                html.appendChild(TextView("After AK").apply {
                    classList += "form-btn"
                    onClick { this@wrap.html.remove() }
                }.html)

                val select = createHtmlView<HTMLSelectElement>()
                select.classList.add("form-control")
                select.name = "constraint-only-after-work-group-${index++}"

                launch {
                    val all = WorkGroupRepository.all()

                    for (wg in all) {
                        val option = createHtmlView<HTMLOptionElement>()
                        option.value = wg.id.toString()
                        option.textContent = wg.name
                        select.appendChild(option)
                    }
                }

                html.appendChild(select)
            }.html)
        }
    }

    console.log(constraints)
    for (child in constraints.children.iterator()) {
        console.log(child)
        if (child.classList.contains("input-group")) {
            val span = child.firstElementChild as HTMLElement
            console.log(span)

            span.addEventListener("click", org.w3c.dom.events.EventListener {
                println("click")
                child.remove()
            })
        }
    }
}
