module Design.Global
  ( globalDesign
  ) where

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

import qualified Design.Appearing as Appearing
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.Loadable  as Loadable
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
  Appearing.design
  Modal.design
  ".tooltip" ? Tooltip.design
  Views.design
  Form.design
  Loadable.design

  spinKeyframes
  appearKeyframe

  html ? do
    height (pct 100)

  "g-Body--Modal" ?
    overflowY hidden

  body ? do
    position relative
    minWidth (px 320)
    height (pct 100)
    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)

  ".app" ? do
    appearAnimation
    display flex
    height (pct 100)
    flexDirection column

  -- "main" ?
  --   appearAnimation

  ".pageSpinner" ? do
    display flex
    alignItems center
    justifyContent center
    flexGrow 1

  ".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
    lineHeight (em 1.3)

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

  ul ? do
    "margin-top" -: "1vh"
    "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
      display none
      position absolute

    ".waiting" & do
      ".content" ? do
        opacity 0
      svg # ".loader" ? do
        display block
        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")
  ]