dotfiles/packages/website/frontend/src/Config/Helpers/Cards/Inner/Text.elm

module Config.Helpers.Cards.Inner.Text exposing
    ( bodyFormat
    , detailBodyLink
    , detailBodyMaker
    , detailFormat
    , detailFormatEl
    , detailHeader
    , detailSpacing
    , detailTitleLink
    , detailTitleLinkWide
    , detailTitleMaker
    , divider
    , generalButton
    , getHoverColours
    , listCounter
    , listItem
    , listMaker
    , listMaker2
    , numberedListItem
    , renderCodeLine
    , socialMaker
    , titleFormat
    )

import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Converters exposing (formatSocial)
import Config.Style.Colour.Helpers
    exposing
        ( ThemeColor(..)
        , getThemeColor
        )
import Config.Style.Colour.Types exposing (SyntaxColors)
import Config.Style.Fonts
    exposing
        ( defaultFontSize
        , headerFontSizeBig
        , paragraphSpacing
        )
import Config.Style.Icons.Types as TySvg exposing (..)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleMedium
        , transitionStyleSlow
        )
import Element as E
    exposing
        ( Attribute
        , Element
        , alignLeft
        , alignTop
        , centerX
        , column
        , el
        , fill
        , height
        , maximum
        , mouseOver
        , newTabLink
        , none
        , paddingEach
        , paddingXY
        , paragraph
        , pointer
        , row
        , spacing
        , text
        , width
        )
import Element.Border as D
    exposing
        ( color
        , rounded
        , widthEach
        )
import Element.Font as F
    exposing
        ( alignLeft
        , bold
        , color
        , family
        )
import Shared
import Svg.Attributes as SvgAttr


detailSpacing : Attribute msg
detailSpacing =
    spacing 5


detailFormat : (List (Attribute msg) -> List (Element msg) -> Element msg) -> List (Element msg) -> Element msg
detailFormat block elements =
    block
        [ detailSpacing
        , width fill
        ]
        elements


detailFormatEl : Element msg -> Element msg
detailFormatEl element =
    el
        [ detailSpacing
        , width fill
        ]
        element


titleFormat : ThemeColor -> List (Attribute msg)
titleFormat colour =
    [ alignTop
    , F.bold
    , F.color (getThemeColor colour)
    , defaultFontSize
    , paragraphSpacing
    ]


bodyFormat : ThemeColor -> List (Attribute msg)
bodyFormat colour =
    [ F.regular
    , defaultFontSize
    , F.color (getThemeColor colour)
    , width fill
    , F.alignLeft
    ]


detailTitleMaker : ThemeColor -> String -> Element msg
detailTitleMaker colour item =
    el
        (titleFormat colour)
    <|
        text item


detailTitleLink : ThemeColor -> String -> Element msg
detailTitleLink colour item =
    el
        (getHoverColours colour
            ++ (titleFormat colour
                    ++ [ pointer
                       ]
               )
        )
    <|
        text item


detailTitleLinkWide : ThemeColor -> String -> Element msg
detailTitleLinkWide colour item =
    paragraph
        (getHoverColours colour
            ++ (titleFormat colour
                    ++ [ width fill
                       , pointer
                       ]
               )
        )
        [ text item ]


detailBodyLink : ThemeColor -> String -> Element msg
detailBodyLink colour item =
    el
        (getHoverColours colour
            ++ (bodyFormat colour
                    ++ [ width fill
                       , pointer
                       ]
               )
        )
    <|
        text item


getHoverColours : ThemeColor -> List (Attribute msg)
getHoverColours colour =
    [ transitionStyleMedium
    , mouseOver
        [ case colour of
            TextLightGrey ->
                F.color (getThemeColor TextLightOrange)

            TextLightOrange ->
                F.color (getThemeColor TextDarkOrange)

            TextDarkOrange ->
                F.color (getThemeColor TextDeepDarkOrange)

            _ ->
                F.color (getThemeColor TextDeepDarkOrange)
        ]
    ]


detailBodyMaker : ThemeColor -> Element msg -> Element msg
detailBodyMaker colour item =
    paragraph
        (bodyFormat colour)
        [ item ]


listMaker : (a -> Element msg) -> List a -> Element msg
listMaker makeItem itemInfo =
    detailFormat column <|
        List.map2 (\x y -> makeItem x)
            itemInfo
            (List.range 1 (List.length itemInfo))


listMaker2 : (a -> Int -> Element msg) -> List a -> Element msg
listMaker2 makeItem itemInfo =
    detailFormat column <|
        List.map2
            (\x y -> makeItem x y)
            itemInfo
            (List.range 1 (List.length itemInfo))


listItem : ThemeColor -> String -> Element msg
listItem colour item =
    el
        [ defaultFontSize
        , F.bold
        , E.alignLeft
        , width fill
        , F.color (getThemeColor colour)
        ]
    <|
        paragraph [ F.regular ]
            [ E.text ("• " ++ item) ]


numberedListItem : ThemeColor -> Int -> Element msg
numberedListItem colour index =
    el
        [ alignTop
        , F.bold
        , F.color (getThemeColor colour)
        , defaultFontSize
        ]
    <|
        text (String.fromInt index ++ ". ")


generalButton : Shared.Model -> String -> (OuterPart msg -> Element msg) -> Element msg
generalButton shared url icon =
    newTabLink
        ([ alignTop
         , paddingXY 0 5
         , F.color (getThemeColor TextLightOrange)
         ]
            ++ getHoverColours TextLightOrange
        )
        { url = url
        , label =
            el
                [ transitionStyleSlow
                , paddingXY 7 7
                , D.rounded 10
                ]
            <|
                icon
                    { elementAttributes =
                        []
                    , sharedModel = shared
                    , svgAttributes = [ SvgAttr.width "20" ]
                    }
        }


socialMaker : String -> String -> Element msg
socialMaker link item =
    newTabLink
        []
        { url = link
        , label =
            detailTitleLink
                TextLightOrange
                (formatSocial item)
        }


listCounter : Int -> Element msg
listCounter index =
    detailTitleMaker TextLightGrey
        (String.fromInt index ++ ". ")


divider : Element msg
divider =
    el
        [ width fill
        , height fill
        , centerX
        , width (fill |> maximum 600)
        , D.widthEach
            { bottom = 1
            , top = 0
            , left = 0
            , right = 0
            }
        , D.color (getThemeColor TextLightOrange)
        , paddingEach
            { top = 10
            , bottom = 0
            , left = 0
            , right = 0
            }
        ]
    <|
        none


renderCodeLine : SyntaxColors -> List (Element msg) -> Element msg
renderCodeLine colors elements =
    paragraph
        [ F.color colors.text
        , F.alignLeft
        , F.family
            [ F.monospace ]
        ]
        elements


detailHeader : String -> Element msg
detailHeader title =
    column
        [ centerX
        , width fill
        ]
        [ divider
        , paragraph
            [ F.color (getThemeColor TextLightGrey)
            , paragraphSpacing
            , F.bold
            , centerX
            , F.center
            , headerFontSizeBig
            , F.color (getThemeColor TextLightOrange)
            , paddingEach
                { top = 20
                , right = 0
                , bottom = 0
                , left = 0
                }
            ]
            [ text (String.toUpper title) ]
        ]