package industries.sunshine.planningpoker

import scala.scalajs.js
import scala.scalajs.js.annotation.*
import com.raquo.laminar.api.L.{*, given}
import industries.sunshine.planningpoker.common.Models.*
import scala.concurrent.duration._

import org.scalajs.dom

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

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

object Main {
  final case class AppState(
      myId: Option[PlayerID]
  )
  // TODO is this ok for state creation? link with auth component and use in another?
  val appStateSignal = Var(AppState(Some(TestModels.me.id))).signal
  val staticStateSignal = Var(TestModels.testRoom).signal

  import io.laminext.websocket.circe.WebSocket._
  import io.laminext.websocket.circe.webSocketReceiveBuilderSyntax

  val roomStateWSStream = io.laminext.websocket.circe.WebSocket
    .url("ws://0.0.0.0:5153/api/subscribe")
    // .json[RoomStateView, Unit]
    .build(
      managed = true,
      autoReconnect = false,
      reconnectDelay = 1.second,
      reconnectDelayOffline = 20.seconds,
      reconnectRetries = 1
    )

  val stateStream = roomStateWSStream.received
  // and what's the difference between EventStream and Signal???
  val stateSignal =
    stateStream.startWith(TestModels.testRoom, cacheInitialValue = true)

  // NOTE let's try with fetch \ rest
  // import io.laminext.fetch.Fetch
  // import com.raquo.laminar.api.L._
  // import scala.concurrent.ExecutionContext.Implicits.global
  // val testRest = Fetch.get("http://0.0.0.0:5173/api/subscribe").text

  import scala.scalajs.js.Dynamic.{global => g}
  def appElement(): Element = {
    div(
      className := "w-screen h-screen flex flex-col justify-center items-center",
      div(
        className := "bg-yellow-400",
        child.text <-- roomStateWSStream.events
          .map { ev =>
            {
              val a = ev.toString()
              g.console.warn(s"got state $a")
              a
            }
          }
          .startWith("BEFORE WS")
      ),
      div(
        className := "h-24 w-full flex flex-for justify-center items-center bg-green-200",
        p(className := "text-2xl", "Here be header")
      ),
      RoomView.renderRoom(staticStateSignal),
      roomStateWSStream.connect
    )
  }
}