package reading.component.widget

import scalatags.JsDom.all._

import org.scalajs.dom.html.Input
import org.scalajs.dom.KeyboardEvent

import scalacss.Defaults._
import scalacss.ScalatagsCss._

import rx._

import reading.component.style.{ Color => C }
import reading.component.widget.style.{ Input => InputStyle }

object Input {
  def apply(
    style: StyleA,
    query: Var[String],
    label: String = "",
    onEnter: => Unit = (),
    maxLength: Option[Int] = None
  )(
    implicit
    ctx: Ctx.Owner
  ): Frag = {
    val inputBox = input(
      InputStyle.input,
      placeholder := label,
      onkeyup := { (e: KeyboardEvent) =>
        val input = e.target.asInstanceOf[Input]
        query() = input.value
        input.value = input.value
        if (e.keyCode == 13) onEnter
      },
      maxlength := maxLength.map(_.toString).getOrElse("")
    ).render

    query.trigger {
      inputBox.value = query.now
    }

    div(
      InputStyle.render,
      InputStyle.parent,
      style,
      inputBox,
      span(
        InputStyle.clear,
        onclick := (() => query() = ""),
        Cross(15.px, C.gray.value)
      )
    )
  }
}