package industries.sunshine.planningpoker

import scala.scalajs.js
import com.raquo.laminar.api.L.{*, given}
import industries.sunshine.planningpoker.common.Models.*
import io.laminext.fetch.Fetch
import scala.scalajs.js.Dynamic.{global => g}

import concurrent.ExecutionContext.Implicits.global

object OwnHandControls {
  def render(roomStateSignal: Signal[RoomStateView]): Element = {
    val cardTypesSignal = roomStateSignal.map(myUnselectedCards(_))
    div(
      className := "flex flex-row justify-center",
      children <-- cardTypesSignal.map(_.map(renderCard(_)))
    )
  }

  private def renderCard(value: String): Element = {
    val submitVote = Fetch.get(s"/api/vote/$value").text

    div(
      className := "cursor-pointer w-24 h-48 m-1 rounded-l flex justify-center items-center m-3 text-black bg-gray-50 border-black border-2 drop-shadow-md",
      className := "hover:-translate-y-2 hover:scale-[1.02] hover:drop-shadow-xl rounded-lg hover:bg-gray-100 ease-linear duration-200",
      onClick.flatMap(_ => submitVote) --> Observer(resp => g.console.info(resp.toString())),
      div(
        className := "-rotate-45 text-xl",
        value
      )
    )
  }

  private def myUnselectedCards(state: RoomStateView): List[String] = {
    state.round match {
      case RoundStateView.Voting(myCard, _) =>
        state.allowedCards.filterNot(value => myCard.contains(value))
      case RoundStateView.Viewing(votes) =>
        state.allowedCards.filterNot(value => votes.toMap.get(state.me).contains(value))
    }
  }

}