module WWW.Css where

import Control.Monad
import Clay
import Clay.Flexbox qualified as F
import Clay.Stylesheet
import Data.Foldable (fold)
import Data.Text (Text)
import Diagrams.Attributes (SomeColor)

import WWW.Colors qualified as G



colorVariables :: G.Gruvbox SomeColor -> Css
colorVariables gb = do
    fold $ key <$> (("--" <>) <$> G.gruvboxVar) <*> gb
    key "--html-bg" $ G._bg1 gb
    key "--href" $ G._orange gb
    key "--href-hover" $ G._orange' gb
    key "--hr" $ G._gray gb
    key "--code-bg" $ G._bg gb


rootColors :: Css
rootColors = do
    ":root[color-mode=light]" ? do
        colorVariables G.gruvboxLightH
    ":root[color-mode=dark]" ? do
        colorVariables G.gruvboxDarkH

general :: Css
general = do
    html ? do
        fontFamily [ "Fira Sans" ] [ sansSerif ]
        backgroundColor $ cvar "html-bg"
        color $ cvar "fg"
        margin (em 1) auto auto auto
    body ? do
        backgroundColor $ cvar "bg"
        join4 margin auto
        maxWidth (cm 30)
        border (px 1) solid $ cvar "fg"
        join4 padding $ em 1
    a ? do
        color $ cvar "href"
        textDecoration underline
        hover & do
            color $ cvar "href-hover"
    header ? do
        padding nil nil nil nil
        margin nil nil nil nil
        fontSize $ em 1
        fontWeight bold
        textDecoration none
    footer ? do
        clear both
        paddingTop $ px 10
        paddingBottom $ px 15
        fontWeight bold
        hr ? do
            borderTop (px 3) double $ cvar "hr"
            borderBottomWidth 0
        a ? do
            textDecoration none
            color $ cvar "footer-href"
        a # hover ? do
            textDecoration underline
            color $ cvar "footer-href-hover"
    code ? do
        fontFamily [ "Fira Code" ] [ monospace ]
        backgroundColor $ cvar "code-bg"
        join4 padding $ px 2


someClasses :: Css
someClasses = do
    ".pull-left" ? do
        float floatLeft
    ".pull-right" ? do
        float floatRight

menu :: Css
menu = do
    clear both
    display block
    "width" -: "100%"
    margin 0 0 (em 1) 0
    color $ cvar "bg"
    backgroundColor $ cvar "fg"
    "overflow" -: "hidden"
    a ? do
        display block
        float floatLeft
        padding (px 5) (px 10) (px 5) (px 10)
        color $ cvar "bg"
    a # hover ? do
        color $ cvar "href-hover"




-- helpers

join3 :: Monad m => m (m (m a)) -> m a
join3 = join . join

join4 :: Monad m => m (m (m (m a))) -> m a
join4 = join . join3

cvar :: Text -> Color
cvar n = Other $ value $ "var(--" <> n <> ")"
-- root :: Css
-- root = do
--     ":root" ? do
--         "--