PageTop.hs

{-# LANGUAGE OverloadedLabels #-}
{-# LANGUAGE OverloadedStrings #-}
{-# OPTIONS_GHC -fno-warn-orphans #-}

module WikiMusic.SSR.View.Components.PageTop
  ( sharedPageTop,
  )
where

import Data.Text qualified as T
import Optics
import Relude
import Text.Blaze.Html
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
import WikiMusic.SSR.Language
import WikiMusic.SSR.Model.Api
import WikiMusic.SSR.View.Components.Other

sharedPageTop :: Maybe Text -> UiMode -> Language -> Palette -> Html
sharedPageTop title' mode language palette = do
  section ! class_ "flex direction-column flex items-center" $ do
    a
      ! href "/songs"
      $ h1
      ! class_ "italic font-size-xxx-large font-weight-300"
      $ text ((^. #titles % #wikimusicSSR) |##| language)
    em
      ! class_ "margin-top-large font-size-large font-weight-300"
      $ text ((^. #slogans % #pageTop) |##| language)

  section ! class_ "flex direction-row justify-content-center gap-small" $ do
    H.div
      $ H.form
      ! action "/user-preferences/locale"
      ! method "POST"
      ! enctype "multipart/form-data"
      $ do
        select ! onchange "this.form.submit()" ! name "locale" $ do
          option !? ((language ^. #value) == "en", selected "true") ! value "en" $ "🇬🇧 English"
          option !? ((language ^. #value) == "nl", selected "true") ! value "nl" $ "🇳🇱 Nederlands"

        noscript $ button ! type_ "submit" $ "submit"
    H.div $ H.form ! action "/user-preferences/dark-mode" ! method "POST" ! enctype "multipart/form-data" $ do
      select ! onchange "this.form.submit()" ! type_ "checkbox" ! name "dark-mode" ! A.id "dark-mode" $ do
        option !? ((mode ^. #value) == "dark", selected "true") ! value "dark" $ simpleIcon "🌙" "dark mode"
        option !? ((mode ^. #value) == "light", selected "true") ! value "light" $ simpleIcon "☀️" "light mode"
      noscript $ button ! type_ "submit" $ "submit"
    H.div $ H.form ! action "/user-preferences/palette" ! method "POST" ! enctype "multipart/form-data" $ do
      select ! onchange "this.form.submit()" ! type_ "checkbox" ! name "palette" ! A.id "palette" $ do
        option !? ((palette ^. #value) == "mauve", selected "true") ! value "mauve" $ "mauve"
        option !? ((palette ^. #value) == "green", selected "true") ! value "green" $ "green"
      noscript $ button ! type_ "submit" $ "submit"

  warningBanner language
  myNav language
  mapM_ (\x -> H.div ! class_ "text-align-center" $ (h2 ! class_ "font-weight-300 font-size-xx-large") . fromString . T.unpack $ x) title'

myNav :: Language -> Html
myNav language = do
  hr
  nav $ ol $ do
    li $ a ! class_ "nav-link scale-on-hover" ! href "/songs" $ text ((^. #more % #songsNav) |##| language)
    li $ a ! class_ "nav-link scale-on-hover" ! href "/artists" $ text ((^. #more % #artistsNav) |##| language)
    li $ a ! class_ "nav-link scale-on-hover" ! href "/genres" $ text ((^. #more % #genresNav) |##| language)
    li $ a ! class_ "nav-link scale-on-hover" ! href "/login" $ text ((^. #more % #loginNav) |##| language)
  hr