module Config.Format exposing (..)

import Config.Colour exposing (..)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D exposing (..)
import Element.Font as F
import Html exposing (col)
import Html.Attributes as H exposing (style)


topLevelContainer : Element msg -> Element msg
topLevelContainer =
    el
        [ E.width fill
        , height fill
        , B.color colourTheme.backgroundLightGrey
        ]


pageList : List (Attribute msg)
pageList =
    [ spacing 30
    , centerX
    , centerY
    , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
    ]


transitionStyle : Attribute msg
transitionStyle =
    htmlAttribute <| style "transition" "all 0.3s ease-in-out"


transitionHighlightedLinkHover : Element msg -> Element msg
transitionHighlightedLinkHover =
    el
        [ mouseOver [ F.color colourTheme.textDarkOrange ]
        , transitionStyle
        ]


transitionNonHighlightedLinkHover : Element msg -> Element msg
transitionNonHighlightedLinkHover =
    el
        [ mouseOver [ F.color colourTheme.textLightOrange ]
        , transitionStyle
        ]


transitionNonHighlightedLinkHoverWithMove : Element msg -> Element msg
transitionNonHighlightedLinkHoverWithMove content =
    el
        [ E.width fill
        , height (px 30)
        ]
        (el
            [ centerX
            , centerY
            , mouseOver [ F.color colourTheme.textLightOrange, F.size 25 ]
            , transitionStyle
            ]
            content
        )


spartanFont : F.Font
spartanFont =
    F.typeface "League Spartan"


navBarLinkFormat : List (Attr () msg)
navBarLinkFormat =
    [ F.size 17
    ]


titleFormat : List (Attr () msg)
titleFormat =
    [ F.size 23
    , F.bold
    ]


nonHighlightedTitleFormat : List (Attr () msg)
nonHighlightedTitleFormat =
    [ F.color colourTheme.textLightGrey
    ]
        ++ titleFormat


highlightedTitleFormat : List (Attr () msg)
highlightedTitleFormat =
    [ F.color colourTheme.textLightOrange
    ]
        ++ titleFormat


paragraphFontSize : Attr decorative msg
paragraphFontSize =
    F.size 17


paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
paragraphLinkFormat =
    newTabLink
        [ paragraphFontSize
        , F.color colourTheme.textLightOrange
        ]


paragraphSpacing : Attribute msg
paragraphSpacing =
    spacing 3


paragraphText : List (Attr () msg)
paragraphText =
    [ F.color colourTheme.textLightGrey
    , paragraphSpacing
    , paragraphFontSize
    ]


paragraphHightlightedBoldText : List (Attr () msg)
paragraphHightlightedBoldText =
    [ F.color colourTheme.textLightOrange
    , F.bold
    , paragraphSpacing
    , paragraphFontSize
    ]


paragraphFormat : List (Attr () msg)
paragraphFormat =
    []
        ++ paragraphText


paragraphBoldFormat : List (Attr () msg)
paragraphBoldFormat =
    [ F.bold ]
        ++ paragraphText


paragraphWidth : Attribute msg
paragraphWidth =
    E.width <| px 700


paragraphAlignLeft : List (Attr () msg)
paragraphAlignLeft =
    [ alignLeft, paragraphWidth ]
        ++ paragraphText


paragraphAlignCenter : List (Attr () msg)
paragraphAlignCenter =
    [ centerX, paragraphWidth ]
        ++ paragraphText


basicDivider : Element msg
basicDivider =
    el
        [ E.width fill
        , centerX
        , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
        , D.color (rgb255 200 200 200)
        , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
        ]
        none