package reading.component.index

import rx._
import Ctx.Owner.Unsafe._

import scalatags.JsDom.all._
import scalacss.Defaults._
import scalacss.ScalatagsCss._

import reading.component.index.style.{ Header => HeaderStyle }
import reading.component.widget.Cross
import reading.component.style.{ Color => C }
import reading.models.Filter
import reading.Route
import reading.utils.{ RxTag, RxAttr }

object Header {
  def apply(filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean], booksCount: Rx[Int]): Frag = {
    val filtersCount: Rx[Int] = Rx(filters().length)

    div(
      HeaderStyle.render,
      HeaderStyle.header,

      RxTag { implicit context =>
        div(
          div(
            HeaderStyle.showFiltersMenu,
            RxAttr(onclick, Rx(() => showFiltersMenu() = true)),
            "Filtrer",
            if (filtersCount() > 0) span(HeaderStyle.filtersCount, filtersCount()) else span("")
          ),

          if (filters().isEmpty)
            span("")
          else
            div(
              HeaderStyle.filters,

              div(
                HeaderStyle.clear,
                RxAttr(onclick, Rx(() => updateFilters(filters, Nil))),
                "Effacer les filtres"
              ),

              filters().sortBy(_.name).map { filter =>
                div(
                  HeaderStyle.filter,
                  RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter)))),
                  span(HeaderStyle.name, filter.name.capitalize),
                  Cross(15.px, C.black.value)
                )
              }
            )
        )
      },

      RxTag { implicit context =>
        div(
          HeaderStyle.booksCount,
          span(s"${booksCount()} livre${if (booksCount() > 1) "s" else ""}")
        )
      }
    )
  }

  private def updateFilters(filters: Var[Seq[Filter]], newFilters: Seq[Filter]): Unit = {
    filters() = newFilters
    Route.push(Route.Books(newFilters))
  }
}