package nl.astraeus.komp

import kotlinx.browser.document
import kotlinx.html.div
import kotlinx.html.i
import kotlinx.html.id
import kotlinx.html.js.onClickFunction
import kotlinx.html.p
import kotlinx.html.span
import kotlinx.html.svg
import kotlinx.html.table
import kotlinx.html.td
import kotlinx.html.tr
import kotlinx.html.unsafe
import org.w3c.dom.Element
import org.w3c.dom.HTMLDivElement
import kotlin.test.Test

class TestKomponent : Komponent() {
  override fun HtmlBuilder.render() {
    div {
      +"Test"
    }
  }
}

class Child1 : Komponent() {
  override fun HtmlBuilder.render() {
    div {
      +"Child 1"
    }
  }
}

class Child2 : Komponent() {
  override fun HtmlBuilder.render() {
    div {
      +"Child 2"
    }
  }
}

class SimpleKomponent : Komponent() {
  var hello = true
  var append = HtmlBuilder.create {
    p {
      +"Appended"
    }
  }

  override fun HtmlBuilder.render() {
    div("div_class") {
      span {
        svg {
          unsafe {
            +"""
              <p bla>
            """.trimIndent()
          }
        }
        if (hello) {
          div {
            +"Hello"

            throw IllegalStateException("Bloe")
          }
        } else {
          span {
            +"Good bye"
          }
        }
      }
      div {
        if (hello) {
          id = "123"
          +"div text"
        } else {
          +"div text goodbye"
        }

        onClickFunction = if (hello) {
          {
            println("onClick")
          }
        } else {
          {
            println("onClick 2")
          }
        }
      }
      if (hello) {
        span {
          +"2nd span"
        }
      }
      //append(append)
      if (hello) {
        include(Child1())
      } else {
        include(Child2())
      }
      //append(append)
    }
  }

}

class IncludeKomponent(
  var text: String = "My Text"
) : Komponent() {

  override fun generateMemoizeHash(): Int = text.hashCode()

  override fun HtmlBuilder.render() {
    span {
      +text
    }
  }
}

class ReplaceKomponent : Komponent() {
  val includeKomponent = IncludeKomponent()
  var includeSpan = true

  override fun generateMemoizeHash(): Int = includeSpan.hashCode() * 7 + includeKomponent.generateMemoizeHash()

  override fun HtmlBuilder.render() {
    div {
      +"Child 2"

      div {
        if (includeSpan) {
          span {
            i("fas fa-eye") {
              +"span1"
            }
          }
          span {
            i("fas fa-eye") {
              +"span2"
            }
          }
          span {
            i("fas fa-eye") {
              +"span3"
            }
          }
        }

        include(includeKomponent)
      }
    }
  }
}

class TestUpdate {

  @Test
  fun testUpdateWithEmpty() {
    val div = document.createElement("div") as HTMLDivElement
    val rk = ReplaceKomponent()

    Komponent.logRenderEvent = true

    Komponent.create(div, rk)

    println("ReplaceKomponent: ${div.printTree()}")

    rk.requestImmediateUpdate()

    println("ReplaceKomponent: ${div.printTree()}")

    rk.requestImmediateUpdate()

    println("ReplaceKomponent: ${div.printTree()}")

    rk.includeSpan = false
    rk.requestImmediateUpdate()

    println("ReplaceKomponent: ${div.printTree()}")

    rk.includeSpan = true
    rk.includeKomponent.text = "New Text"
    rk.requestImmediateUpdate()

    println("ReplaceKomponent: ${div.printTree()}")
  }

  @Test
  fun testSimpleKomponent() {
    val sk = SimpleKomponent()
    val div = document.createElement("div") as HTMLDivElement

    Komponent.create(div, sk)

    println("SimpleKomponent: ${div.printTree()}")

    sk.hello = false
    sk.requestImmediateUpdate()

    println("SimpleKomponent updated: ${div.printTree()}")
  }

  @Test
  fun testCreate() {
    var elemTest: Element? = null
    val element = HtmlBuilder.create {
      div("div_class") {
        id = "123"
        +"Test"

        span("span_class") {
          +"Span"

          elemTest = currentElement()
        }

        table {
          tr {
            td {
              +"column 1"
            }
            td {
              +"column 2"
            }
          }
        }
      }
    }

    println("Element: ${element.printTree()}")
    println("divTst: ${elemTest?.printTree()}")
    println("span class: ${
      elemTest?.getAttributeNames()?.joinToString
      { "," }
    }"
    )
  }

}