content: module Tintin.Html.Style where
  
  import Tintin.Core as Core hiding (( & ), rem, (|>))
  
  import Clay
  import qualified Clay.Media as Media
  
  require Tintin.Domain.Project
  
  data Style
  
  style :: Project.Info -> Text
  style info = toText . render $ do
    let (themeColorName, themeColorCode) = themeColor $ Project.color info
    
    html ? do
      height (pct 100)
      minHeight (pct 100)
  
    body ? do
      height (pct 100)
      minHeight (pct 100)
      fontFamily [Project.bodyFont info] [sansSerif]
      fontSize (em 1)
      overflowX hidden
      
      "a" ? do
        color $ shade 0.3 themeColorCode  
      "a:hover" ? do
        color $ shade 0.1 themeColorCode
  
    forM_ (zip [(0::Double)..] [h1, h2, h3]) $ \(n, x) -> x ? do
      fontFamily [Project.titleFont info] [sansSerif]
      fontWeight $ weight $ Project.titleFontWeight info
      fontSize (em (2.441 Core.** n))
  
    h1 ? fontSize (em 2.441)
    h2 ? fontSize (em 1.953)
    h3 ? fontSize (em 1.563)
  
    blockquote ? do
      borderLeft solid (px 4) "#DDD"
      paddingLeft (rem 1)
      color codeTextColor
  
    ".next-prev" ? do
      marginTop (pct 5)
      marginBottom (pct 5)
  
    "#header-container" ? do
      marginTop (rem 5)
      marginBottom (rem 5)
      textAlign center
  
      "img" ? do
        maxHeight (rem 7)
  
    ".cover-heading" ? do
      fontSize (pct 800)
      marginBottom (rem 1.563)
  
    ".cover-container" ? do
     backgroundColor themeColorCode
  
    ".watermark" ? do
      position absolute
      top (px 0)
      left (px 0)
      maxHeight (rem 1.2504)
      marginTop (rem 1.2504)
      marginLeft (rem 1.2504)
  
    ".cover-heading-subtitle" ? do
      marginTop (rem 3)
      fontSize (rem 1.953)
      color $ contrastingColorFor themeColorCode
  
    ".vertical-auto" ? do
      marginTop auto
      marginBottom auto
  
    ".content" ? do
      marginTop (pct 5)
      marginBottom (pct 5)
  
    "#wrapper" ? do
      paddingLeft (px 0)
      transition "all" (sec 0.5) ease (sec 0)
      ".toggled" & do
        paddingLeft (px 250)
        "#sidebar-wrapper" ? do
          width (px 250)
        "#page-content-wrapper" & do
          position absolute
          marginRight (px (-250))
  
    "#page-content-wrapper" ? do
      width (pct 100)
      position absolute
      marginTop (rem 3)
      padding (px 15) (px 15) (px 15) (px 15)
      img ? do
        maxWidth (pct 100)
  
    "#sidebar-wrapper" ? do
      zIndex 1000
      position fixed
      left (px 250)
      width (px 0)
      marginLeft (px (-250))
      overflowY hidden
      overflowX hidden
      transition "all" (sec 0.5) ease (sec 0)
  
  
    ".sidebar-nav" ? do
      position absolute
      top (px 0)
      width (px 250)
      margin (px 0) (px 0) (px 0) (px 0)
      padding (px 0) (px 0) (px 0) (px 0)
      listStyleType none
      "li" ? do
        textIndent (indent $ px 20)
        lineHeight (px 40)
        "a" ? do
          display block
          textDecoration none
          fontWeight bold
          color $ shade 0.6 themeColorCode
        "a:hover" ? do
          textDecoration none
          color $ shade 0.7 themeColorCode
        ".tintin-fg-active" ? do
          color white
  
    "#menu-toggle" ? do
      position absolute
      img ? do
        position absolute
        left (px 0)
      ".rotateIn" ? do
        zIndex 999
  
    ".tintin-doc-topbar" ? do
      height (rem 3)
      a ? do
        marginLeft (rem 1)
        marginTop (rem 0)
        width (rem 1.5)
  
    ".filter-gray" ? do
      position relative
      bottom (px ( 3 ))
      marginLeft (rem 0.25)
      marginRight (rem 1)
      height (rem 1)
  
    ".footer-theam" ? do
      position relative
      bottom (px $ 1)
      marginLeft (rem $ -0.25)
      height (rem 1.75)
  
    ".tintin-doc-footer" ? do
      bottom (px 0)
      height (rem $ -15)
      width (pct 100)
      color footerTextColor
  
    ".main-container" ? do
      minHeight (pct 100)
      position relative
  
    "#content" ? do
      minHeight (pct 95)
  
    ".sidebar-nav" |> ".sidebar-brand" ? do
      height (rem 3)
      fontSize (rem 2)
      fontFamily [Project.titleFont info] [sansSerif]
      fontWeight $ weight $ Project.titleFontWeight info
      paddingTop (rem 2.5)
      paddingBottom (rem 2.5)
      marginBottom (rem 1.5)
      img ? do
        height (rem 1.5)
  
    ".tintin-navbar" ? do
      fontWeight bold
      backgroundColor $ shade 0.2 themeColorCode
      ".left-part" ? do
        important $ paddingLeft (px 0)
      ul ? do
        marginTop (rem 1)
        listStyleType none
        li ? do
          marginRight (rem 1)
          display inline
          a ? do
            color $ shade 0.6 themeColorCode
          "a:hover" ? do
            textDecoration none
            color $ shade 0.7 themeColorCode
  
      ".tintin-navbar-active" ? do
        a ? do
          color $ contrastingColorFor themeColorCode
        "a:hover" ? do
          textDecoration none
          color . shade 0.2 $ contrastingColorFor themeColorCode
  
    ".tintin-bg-70" ? do
      backgroundColor $ shade 0.2 themeColorCode
   
    (element $ ".tintin-bg-" <> themeColorName) ? do
      backgroundColor themeColorCode
  
    (element $ ".tintin-fg-" <> themeColorName) ? do
      color themeColorCode
  
    ".tintin-fg-active" ? do
      color white
  
  
    ".tintin-fg-disabled" ? do
      color black
  
    footer ? do
      position relative
      bottom (px 0)
      left (px 0)
      width (pct 100)
      paddingTop (px 30)
      paddingBottom (px 30)
      color $ contrastingColorFor themeColorCode
      backgroundColor $ shade 0.2 themeColorCode
      textAlign center
      
      a ? do
        color $ shade 0.6 themeColorCode
      "a:hover" ? do
        textDecoration none
        color $ shade 0.7 themeColorCode
        
      ".author" ? do
        marginTop (em 1.2)
        fontSize (em 1.2)
        
      ".site-generated-message" ? do
        fontSize (em 0.8)
        marginTop (em 3)
        marginBottom (em 3)
  
    ".container" ? do
      maxWidth (rem 50)
  
    query Media.screen [Media.minWidth (px 768)] $ do
      "#wrapper" ? do
        paddingLeft (px 0)
        ".toggled" ? do
          paddingLeft (px 250)
          "#sidebar-wrapper" ? do
            width (px 250)
          "#page-content-wrapper" ? do
            position relative
            marginRight (px 0)
  
      "#sidebar-wrapper" ? do
        width (px 0)
  
      "#page-content-wrapper" ? do
        padding (px 20) (px 20) (px 20) (px 20)
        position relative
  
  
  themeColor :: Project.Color -> (Text, Color)
  themeColor (Project.HexColor colorCode) = ("custom"     , fromString $ toString colorCode)
  themeColor Project.Purple               = ("purple"     , "#9F76B4")
  themeColor Project.LightGreen           = ("lightgreen" , "#A4CB58")
  themeColor Project.DarkGreen            = ("darkgreen"  , "#3C8B6A")
  themeColor Project.Blue                 = ("blue"       , "#94C1E8")
  themeColor Project.DarkBlue             = ("darkblue"   , "#007C99")
  themeColor Project.Bronze               = ("bronze"     , "#A4A27A")
  themeColor Project.DarkOrange           = ("darkorange" , "#FF6602")
  themeColor Project.LightOrange          = ("lightorange", "#FAA73E")
  themeColor Project.Red                  = ("red"        , "#D30228")
  themeColor Project.Grey                 = ("grey"       , "#4D4D4D")
  
  codeTextColor :: Color
  codeTextColor = "#777"
  
  blackish :: Color -- This is the default dark grey color from Boostrap
  blackish = "#212529"
  
  footerTextColor :: Color
  footerTextColor = rgba 0 0 0 0.30
  
  contrastingColorFor :: Color -> Color
  contrastingColorFor color = 
    case soulFor color of
      Light    -> blackish
      Darkness -> white
      
  shade :: Float -> Color -> Color
  shade percent color = 
    case soulFor color of
      Light    -> Clay.darken percent color
      Darkness -> Clay.lighten percent color
  
  data Soul = Darkness | Light
  
  soulFor :: Color -> Soul
  soulFor (Clay.Rgba red green blue _) =
    if ((fromIntegral (red + green + blue) / 3) > midTone)
    then Light
    else Darkness
   where
    midTone = 128.0
  soulFor c = soulFor $ Clay.toRgba c