module Tintin.Html.Templating where

import Lucid

import Data.Maybe
import Tintin.Core
require Tintin.Html.Style
require Tintin.Domain.Project

require Data.Text

data Templating


asset :: Text -> Text
asset txt = "https://s3-eu-west-1.amazonaws.com/worldwideapps/assets/" <> txt

wrap :: Project.Info -> Project.Context -> Project.Page -> Text
wrap info context page =
  if (Project.filename page) == "index.html"
  then wrapHome info (Project.nextRef context) page
  else wrapPage info context page


wrapPage :: Project.Info -> Project.Context -> Project.Page -> Text
wrapPage info context page = toText . renderText $ do
  doctypehtml_ $ do
    tintinHeader info page
    body_ [class_ "h-100 tintin-fg-black tintin-bg-white"] $ do
      div_ [id_ "main-container", class_ "h-100"] $ do
        section_ [ id_ "content"] $ do
          div_ [id_ "wrapper", class_ "toggled"] $ do
            div_ [id_ "sidebar-wrapper", class_ $ "h-100 tintin-bg-" <> bgColorNameOf info] $ do
              div_ [ class_ "h-100 tintin-bg-70"] ( p_ "" )
              ul_ [ class_ "sidebar-nav"] $ do
                li_ [ class_ $ "sidebar-brand d-flex tintin-bg-" <> bgColorNameOf info] $ do
                  a_ [href_ "index.html", class_ "align-self-center tintin-fg-white"] $ do
                    case Project.logoUrl info of
                      Nothing -> toHtml $ Project.name info
                      Just url -> img_ [src_ url]
                forM_ (filter (\p -> "index.html" /= Project.filename p ) (Project.pages info) ) $ \p -> do
                  li_ $ do
                    let classes =
                          if Project.title page == Project.title p
                          then "tintin-fg-active"
                          else "tintin-fg-disabled"
                    a_ [href_ $ Project.filename p, class_ classes] $ do
                      ( toHtml $ Project.title p )

            nav_ [class_ "navbar navbar-expand-lg tintin-doc-topbar tintin-fg-white"] $ do
              a_ [id_ "menu-toggle", href_ "#menu-toggle", class_ ""] $ do
                img_ [ src_ $ asset "menu.png", class_ "img-fluid animated rotateOut" ]
                img_ [ src_ $ asset "close.png", class_ "img-fluid animated rotateIn" ]

            div_ [id_ "page-content-wrapper"] $ do
              div_ [class_ "container"] $ do
                div_ [class_ "col"] $
                  div_ [ class_ "animated fadeIn"
                       ] $
                    toHtmlRaw $ Project.content page
        div_ [class_ "tintin-doc-footer clear-fix"] $ do
          nextPrev context
          footer info
      tintinPostInit

nextPrev :: Project.Context -> Html ()
nextPrev context = do
  div_ [class_ "row next-prev"] $ do
    whenJust (Project.prevRef context) $ \prev -> do
      div_ [class_ "col-md-4 offset-md-4"] $ do
        a_ [href_ $ Project.refFilename prev] $  do
          ( toHtml $ "< Previous: " <> Project.refTitle prev )
    whenJust (Project.nextRef context) $ \next -> do
      div_ [class_ "col-md-4 ml-auto"] $ do
        a_ [href_ $ Project.refFilename next] $  do
          ( toHtml $ "Next: " <> Project.refTitle next <> " >")

footer :: Project.Info -> Html ()
footer info =
  footer_ [] $
    div_ [class_ "container"] $
      div_ [class_ "row"] $ 
        div_ [class_ "col"] $ do
          when (isJust $ Project.author info) $ do
            let author = fromJust $ Project.author info
            p_ [class_ "author"] $ do
              "Developed by "
              case Project.authorWebsite info of
                Just website -> a_ [ href_ website, target_ "blank" ] (toHtml author)
                Nothing -> span_ [] $ toHtml author 
          p_ [class_ "site-generated-message"] $ do
            "Site generated with "
            a_ [ href_ "https://theam.github.io/tintin", class_ "tintin-logo" ] $
              img_ [ class_ "filter-gray", src_ $ asset "logo.svg" ]
            span_ [] $ toHtmlRaw ("&mdash; &copy; 2019 " :: Text)
            a_ [ href_ "https://www.theagilemonkeys.com"] "The Agile Monkeys"


wrapHome :: Project.Info -> Maybe Project.PageRef -> Project.Page -> Text
wrapHome info nextRef page = toText . renderText $ do
  doctypehtml_ $ do
    tintinHeader info page
    body_ [class_ "tintin-fg-black tintin-bg-white"] $ do

      div_ [class_ $ "tintin-navigation tintin-bg-" <> bgColorNameOf info] $ do
        div_ [class_ "cover-container d-flex p-3 mx-auto flex-column tintin-fg-white"] $ do
          main_ [role_ "main", class_ "masthead mb-auto"] $ do
            div_ [class_ "container"] $ do
              div_ [class_ "row align-items-center"] $ do
                div_ [class_ "col", id_ "header-container"] $ do
                  case Project.logoUrl info of
                    Just url -> img_ [ src_ url, class_ "cover-heading" ]
                    Nothing -> h1_ [class_ "cover-heading"] $ toHtml (Project.name info)
                  p_ [class_ "cover-heading-subtitle"] (toHtml $ Project.synopsis info)

        navbar

      section_ [ id_ "content"
               , class_ "animated fadeIn"
               ] $ do
        div_ [class_ "container"] $ do
          div_ [class_ "content"
               ] $
            div_ [] $ do
              toHtmlRaw $ Project.content page
      nextPrev (Project.Context Nothing nextRef)
      footer info
      tintinPostInit
 where
  navbar =
    nav_ [ class_ "tintin-navbar"
         , style_ "width: 100%;"
         ] $ do
      div_ [ class_ "container d-flex align-items-center" ] $ do
        div_ [class_ "mr-auto"] $ do
          ul_ [class_ "left-part"] $ do
            li_ [class_ "tintin-navbar-active"] $
              a_ [class_ "", href_ "index.html"] "Home"
            let page = case filter (\x -> "index.html" /= Project.filename x ) (Project.pages info) of
                  p:_ -> p
                  []  -> error "At least two documentation pages required: index.md, and one other file."
            li_ [class_ ""] $
              a_ [class_ "", href_ (Project.filename page)] "Docs"
        whenJust (Project.githubLink info) $ \ghlink ->
          div_ [class_ ""] $
            ul_ [class_ ""] $
              li_ [class_ ""] $
                a_ [class_ "", href_ $ "https://github.com/" <> ghlink] "View on GitHub"


tintinHeader :: Project.Info -> Project.Page -> Html ()
tintinHeader info@Project.Info {..} Project.Page {..} =
  head_ $ do
    title_ ( toHtml $ name <> " - " <> title )
    -- Workaround over https://github.com/highlightjs/highlight.js/issues/1387
    meta_ [ charset_ "utf-8" ]
    -- Twitter Card data
    meta_ [ name_ "twitter:card"
          , content_ "summary"
          ]
    meta_ [ name_ "twitter:site"
          , content_ ("https://s3-eu-west-1.amazonaws.com/worldwideapps/assets/tintin-" <> (Text.toLower $ show color) <> ".png")

          ]
    meta_ [ name_ "twitter:title"
          , content_ (name <> " - " <> title)
          ]
    meta_ [ name_ "twitter:description"
          , content_ synopsis
          ]
    whenJust author $ \author ->
      meta_ [ name_ "twitter:creator"
            , content_ author
            ]
    meta_ [ name_ "twitter:image"
          , content_ ("https://s3-eu-west-1.amazonaws.com/worldwideapps/assets/tintin-" <> (Text.toLower $ show color) <> ".png")

          ]
    -- Open Graph data
    meta_ [ itemprop_ "og:type"
          , content_ "website"
          ]
    meta_ [ itemprop_ "og:site_name"
          , content_ "theam"
          ]
    meta_ [ itemprop_ "og:title"
          , content_ (name <> " - " <> title)
          ]
    whenJust githubLink $ \ghlink ->
      meta_ [ itemprop_ "og:url"
            , content_ ghlink
            ]
    meta_ [ itemprop_ "og:image"
          , content_  ("https://s3-eu-west-1.amazonaws.com/worldwideapps/assets/tintin-" <> (Text.toLower $ show color) <> ".png")

          ]
    meta_ [ itemprop_ "og:description"
          , content_ synopsis
          ]
    link_ [ rel_ "stylesheet"
          , href_ $ googleFontUrl info
          ]
    link_ [ rel_ "stylesheet"
          , href_ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          ]
    link_ [ rel_ "stylesheet"
          , href_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night.min.css"
          ]
    link_ [ rel_ "stylesheet"
          , href_ "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
          ]
    link_ [ rel_ "shortcut icon"
          , href_ ( asset $ "favicon-"
                  <> bgColorNameOf info
                  <> ".ico"
                  )
          ]
    link_ [ rel_ "stylesheet"
          , href_ "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css"
          ]
    style_ $ Style.style info


tintinPostInit :: Html ()
tintinPostInit = do
  script_ [ src_ "https://code.jquery.com/jquery-3.2.1.slim.min.js" ] ( "" :: Text )
  script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"] ( "" :: Text )
  script_ [ src_ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"] ( "" :: Text )
  script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"] ( "" :: Text )
  script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/haskell.min.js"] ("" :: Text)
  script_ [ src_ "https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js" ] ( "" :: Text )
  script_ "hljs.initHighlightingOnLoad()"
  script_ "$(function () {$(\"#menu-toggle\").click(function(e) {e.preventDefault();$(\"#wrapper\").toggleClass(\"toggled\");$(\"#menu-toggle img\").toggleClass(\"rotateIn rotateOut\");})});"
  script_ [src_ "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.js"] ("" :: Text)
  script_ [src_ "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/contrib/auto-render.min.js"] ("" :: Text)
  script_ "renderMathInElement(document.body);"

bgColorNameOf :: Project.Info -> Text
bgColorNameOf info =
  case color of
    Project.HexColor color -> fromString "custom"
    _ -> color
          & show
          & Text.toLower
  where color = Project.color info


googleFontUrl :: Project.Info -> Text
googleFontUrl Project.Info {..} = 
  "https://fonts.googleapis.com/css?family=" <> bodyFont <> "|" <> titleFont <> ":" <> show titleFontWeight