module Config.Helpers.Cards.Inner.Helpers exposing (..)

import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Converters exposing (formatSocial)
import Config.Helpers.Format
    exposing
        ( headerFontSizeBig
        , headerFontSizeMedium
        , headerFontSizeSmall
        , paragraphFontSize
        , paragraphSpacing
        )
import Config.Style.Colour.Helpers exposing (..)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleFast
        , transitionStyleMedium
        , transitionStyleSlow
        )
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F


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)
    , headerFontSizeSmall
    , paragraphSpacing
    ]


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


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
        [ paragraphFontSize
        , F.bold
        , 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)
        , paragraphFontSize
        ]
    <|
        text (String.fromInt index ++ ". ")


argumentButton : String -> String -> Element msg
argumentButton url item =
    newTabLink
        [ alignTop
        , paddingXY 0 5
        ]
        { url = url
        , label =
            el
                [ F.color colourTheme.textLightGrey
                , B.color colourTheme.textDarkOrange
                , D.rounded 10
                , paddingEach
                    { top = 6
                    , bottom = 3
                    , left = 10
                    , right = 10
                    }
                , mouseOver
                    [ F.color colourTheme.textLightOrange
                    , B.color colourTheme.textDeepDarkOrange
                    ]
                , transitionStyleSlow
                , headerFontSizeSmall
                , F.bold
                ]
            <|
                text
                    item
        }


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 ++ ". ")
