package industries.sunshine.planningpoker

import scala.scalajs.js
import scala.scalajs.js.annotation.*
import com.raquo.laminar.api.L.{*, given}

import org.scalajs.dom

// import javascriptLogo from "/javascript.svg"
@js.native @JSImport("/javascript.svg", JSImport.Default)
val javascriptLogo: String = js.native

@main
def LiveChart(): Unit =
  renderOnDomContentLoaded(
    dom.document.getElementById("app"),
    Main.appElement()
  )

object Main {
  def appElement(): Element = {
    div(
      className := "w-screen h-screen flex flex-col justify-center items-center bg-green-100",
      div( // container for row of pictures
        className := "flex flex-row w-1/2 justify-center",
        a(className := "flex-initial",
          href := "https://vitejs.dev", target := "_blank",
          img(src := "/vite.svg", className := "", alt := "Vite logo"),
        ),
        a(className := "flex-initial",
          href := "https://developer.mozilla.org/en-US/docs/Web/JavaScript", target := "_blank",
          img(src := javascriptLogo, className := "", alt := "JavaScript logo"),
        ),
      ),
      div(
        className := "flex-initial",
        h1("Hello Laminar and Vite and stuff and other stuff!"),
      ),
      div(className := "bg-blue-400 flex-initial rounded-lg border-2 border-slate-500 p-1 m-1",
          counterButton(),
      ),
      p(className := "flex-initial",
        "Click on the Vite logo to learn more",
      ),
    )
  }
}

def counterButton(): Element = {
  val counter = Var(0)
  button(
    tpe := "button",
    "count is ",
    child.text <-- counter,
    onClick --> { event => counter.update(c => c + 1) },
  )
}

def setupCounter(element: dom.Element): Unit =
  var counter = 0

  def setCounter(count: Int): Unit =
    counter = count
    element.innerHTML = s"count is $counter"

  element.addEventListener("click", e => setCounter(counter + 1))
  setCounter(0)
end setupCounter