module Design.Global
  ( globalDesign
  ) where

import           Clay

import           Data.Text.Lazy   (Text)

import qualified Design.Dialog    as Dialog
import qualified Design.Errors    as Errors
import qualified Design.Form      as Form
import qualified Design.Tooltip   as Tooltip
import qualified Design.Views     as Views

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media

globalDesign :: Text
globalDesign = renderWith compact [] global

global :: Css
global = do
  ".errors" ? Errors.design
  ".dialog" ? Dialog.design
  ".tooltip" ? Tooltip.design
  Views.design
  Form.design

  body ? do
    minWidth (px 320)
    fontFamily ["Cantarell"] [sansSerif]
    Media.tablet $ do
      fontSize (px 15)
      button ? fontSize (px 15)
      input ? fontSize (px 15)
    Media.mobile $ do
      fontSize (px 14)
      button ? fontSize (px 14)
      input ? fontSize (px 14)

  a ? cursor pointer

  input ? fontSize inherit

  h1 ? do
    color Color.chestnutRose
    marginBottom (em 1)
    lineHeight (em 1.2)

    Media.desktop $ fontSize (px 24)
    Media.tablet $ fontSize (px 22)
    Media.mobile $ fontSize (px 20)

  ul ? do
    "margin-bottom" -: "3vh"
    "margin-left" -: "1vh"
    li <? do
      "margin-bottom" -: "2vh"
      before & do
        content (stringContent "• ")
        color Color.chestnutRose
        "margin-right" -: "0.3vw"
      ul <? do
        "margin-left" -: "3vh"
        "margin-top" -: "2vh"

  ".dialog" ? ".content" ? button ? do
    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten

  svg ? height (pct 100)

  button ? do
    ".content" ? display flex
    svg # ".loader" ? display none

    ".waiting" & do
      ".content" ? do
        display none
      svg # ".loader" ? do
        display block
        rotateKeyframes
        rotateAnimation

rotateAnimation :: Css
rotateAnimation = do
  animationName "rotate"
  animationDuration (sec 1)
  animationTimingFunction easeOut
  animationIterationCount infinite

rotateKeyframes :: Css
rotateKeyframes = keyframes
  "rotate"
  [ (0, "transform" -: "rotate(0deg)")
  , (100, "transform" -: "rotate(360deg)")
  ]