package reading.component.index.style

import scalacss.Defaults._

import reading.Media
import reading.component.style.{ Color => C, Count }

object Menu extends StyleSheet.Inline {
  import dsl._

  val menu = style(
    height(100.%%),
    zIndex(1),
    Media.desktop(
      backgroundColor(C.englishWalnut.value),
      color(C.white.value),
      position.relative,
      width(280.px)
    ),
    Media.mobile(
      backgroundColor(C.white.value),
      color(C.black.value),
      position.fixed,
      display.none,
      width(100.%%)
    )
  )

  val show = style(
    Media.mobile(display.block)
  )

  val header = style(
    display.flex,
    alignItems.center,
    justifyContent.center,
    position.relative,
    height(60.px),
    backgroundColor(C.englishWalnut.darken(20).value),
    color(C.white.value),
    textTransform.uppercase,
    fontWeight.bold,
    letterSpacing(1.px),
    Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)")
  )

  val filtersCount = style(
    Count.major,
    marginLeft(20.px)
  )

  val empty = style()

  val groups = style(
    overflowY.scroll,
    paddingTop(20.px),
    Media.desktop(height :=! "calc(100% - 60px)"),
    Media.mobile(height :=! "calc(100% - 120px)")
  )

  val filterTitle = style(
    Commons.filter(),
    minHeight(50.px),
    fontWeight.bold,
    textTransform.uppercase,
    letterSpacing(1.px),
    Media.desktop(marginBottom(10.px))
  )

  val filterTitleCount = style(
    Count.major,
    marginLeft(10.px),
    color.white,
    fontSize(12.px),
    width(20.px),
    height(20.px)
  )

  val filter = style(
    Commons.filter(additionalLeftPadding = 10),
    minHeight(40.px),
    color.inherit,
    &.lastChild(
      Media.desktop(marginBottom(30.px)),
      Media.mobile(marginBottom(15.px))
    ),
    &.hover(color(C.stiletto.value))
  )

  val activeFilter = style(
    color(C.stiletto.value),
    fontWeight.bold,
    cursor.pointer
  )

  val filterCount = style(
    Count.minor
  )

  val footer = style(
    Media.desktop(display.none),
    Media.mobile(
      display.flex,
      width(100.%%),
      height(60.px)
    )
  )

  val clear = style(
    Commons.footerButton,
    border(2.px, solid, C.gray.value)
  )

  val returnToBooks = style(
    Commons.footerButton,
    backgroundColor(C.stiletto.value),
    color(C.white.value)
  )

  val bookCount = style(
    Count.minor,
    color(C.white.value)
  )
}

object Commons extends StyleSheet.Inline {
  import dsl._

  def filter(additionalLeftPadding: Int = 0) = style(
    display.flex,
    alignItems.center,
    width(100.%%),
    padding(5.px, 15.px, 5.px, (15 + additionalLeftPadding).px),
    textAlign.left
  )

  val footerButton = style(
    display.flex,
    flexGrow(1),
    justifyContent.center,
    alignItems.center,
    height(50.px),
    margin(5.px),
    textTransform.uppercase,
    fontSize(14.px),
    fontWeight.bold,
    cursor.pointer
  )
}