package industries.sunshine.planningpoker

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

object OtherPlayers {
  def render(roomStateSignal: Signal[RoomStateView]): Element = {
    val otherPlayers = roomStateSignal.map { state =>
      state.players.filterNot(_.id == state.me).zipWithIndex
    }

    div(
      className := "flex flex-row",
      children <-- otherPlayers.split(_._1.id) { (id, initial, playerSignal) =>
        renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size))
      }
    )
  }

  def renderPlayer(p: Signal[(Player, Int)], cardsAmount: Signal[Int]): Element = {
    val xOffsetStyleSignal = p.map(_._2)
    div(
      className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
      // left <-- p.map(tuple => ((1 + tuple._2) * 10000).toString()),
      styleAttr <-- p.map(tuple => s"left: ${(1 + tuple._2) * 100}px"),
      child.text <-- p.map(_._1.name),
      renderHandCardBacks(cardsAmount)
    )
  }

  def renderHandCardBacks(amountSignal: Signal[Int]): Element = {
    def renderCard(index: Int): Element =
      div(
        className := "w-4 h-8 m-1 rounded bg-gray-600 text-yellow"
      )

    div(
      className := "flex flex-row",
      children <-- amountSignal.map { amount => (1 to amount).map(renderCard) }
    )
  }

}