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.{ Books => BooksStyle }
import reading.component.widget.Popup
import reading.models.{ Book }
import reading.utils.{ RxTag, RxAttr }

object Books {
  def apply(books: Rx[Seq[Book]]): Frag = {
    val focus: Var[Option[Book]] = Var(None)

    div(
      BooksStyle.render,

      RxTag { implicit context =>
        div(
          div(
            BooksStyle.books,

            books().sorted.map { book =>
              div(
                BooksStyle.book,
                img(
                  BooksStyle.cover,
                  src := s"cover/${book.title}.jpg",
                  alt := s"${book.title}, ${book.author}",
                  RxAttr(onclick, Rx(() => focus() = Some(book)))
                )
              )
            }
          ),

          RxTag { implicit context =>
            focus() match {
              case Some(book) => Popup(onClose = focus() = None)(BookDetail(book))
              case None => span("")
            }
          }
        )
      }
    )
  }
}