module Design.Global
  ( globalDesign
  ) where

import           Clay
import           Clay.Color       as C
import           Data.Text.Lazy   (Text)

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Errors    as Errors
import qualified Design.Form      as Form
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media
import qualified Design.Modal     as Modal
import qualified Design.Tooltip   as Tooltip
import qualified Design.Views     as Views

globalDesign :: Text
globalDesign = renderWith compact [] global

global :: Css
global = do
  ".errors" ? Errors.design
  ".modal" ? Modal.design
  ".tooltip" ? Tooltip.design
  Views.design
  Form.design

  spinKeyframes
  appearKeyframe

  html ? do
    height (pct 100)

  body ? do
    position relative
    minWidth (px 320)
    height (pct 100)
    fontFamily ["Cantarell"] [sansSerif]
    ".modal" &
      overflowY hidden
    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)

  ".app" ? do
    appearAnimation

  ".spinner" ? do
    display flex
    alignItems center
    justifyContent center
    width (pct 100)
    height (pct 100)
    paddingBottom (pct 10)

    before & do
      display block
      content (stringContent "")
      width (px 50)
      height (px 50)
      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
      sym borderRadius (pct 50)
      borderTopColor Color.chestnutRose
      spinKeyframes
      spinAnimation

  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
    position relative

    ".content" ? do
      display flex

    svg # ".loader" ? do
      opacity 0
      position absolute

    ".waiting" & do
      ".content" ? do
        opacity 0
      svg # ".loader" ? do
        opacity 1
        spinAnimation

  select ? cursor pointer

spinAnimation :: Css
spinAnimation = do
  animationName "rotate"
  animationDuration (sec 1)
  animationTimingFunction easeInOut
  animationIterationCount infinite

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

appearAnimation :: Css
appearAnimation = do
  animationName "appear"
  animationDuration (sec 0.2)
  animationTimingFunction easeIn

appearKeyframe :: Css
appearKeyframe = keyframes
  "appear"
  [ (0, "opacity" -: "0")
  ]