package industries.sunshine.planningpoker

import scala.scalajs.js
import scala.scalajs.js.annotation.*
import com.raquo.laminar.api.L.{*, given}
import io.laminext.fetch.Fetch
import io.laminext.fetch.FetchResponse
import scala.scalajs.js.Dynamic.{global => g}

import concurrent.ExecutionContext.Implicits.global

object Header {
  def render(loggedIn: Observer[Boolean]): Element = {
    val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]

    val logoutButton = button(
      "Logout",
      onClick.flatMap(_ => Fetch.get("/api/logout").text) --> responseReceived,
      responsesStream --> Observer(resp => g.console.info(s"${resp.toString()}")),
      responsesStream.collect { case resp if resp.ok => false } --> loggedIn
    )

    div(
      className := "h-24 w-full flex flex-for justify-center items-center bg-green-200",
      p(className := "text-2xl", "Here be header"),
      logoutButton
    )
  }
}