website/frontend/src/Config/Helpers/Cardables/Helpers.elm

module Config.Helpers.Cardables.Helpers exposing (..)

import Config.Data.Identity
    exposing
        ( pageNames
        )
import Config.Helpers.Cardables.Types as C exposing (..)
import Config.Helpers.Converters exposing (formatName)
import Config.Helpers.Format
    exposing
        ( headerFontSizeMedium
        , paragraphFontSize
        , paragraphSpacing
        )
import Config.Pages.Debate.Arguments.Records.Template exposing (argument)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Glow
    exposing
        ( glowDeepDarkGrey
        , glowDeepDarkOrange
        )
import Config.Style.Icons.Icons exposing (construction)
import Config.Style.Transitions
    exposing
        ( hoverCircleButtonDarkOrange
        , transitionStyleMedium
        , transitionStyleSlow
        )
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Html.Attributes as H
import Route.Path as Path exposing (..)
import Shared


cardMaker : Device -> Cardable msg -> List (Element msg) -> Element msg
cardMaker device cardable contents =
    let
        cardTitleMaker : String -> Element msg
        cardTitleMaker title =
            el
                [ headerFontSizeMedium
                , F.bold
                , F.color colourTheme.textLightGrey
                , B.color colourTheme.textDarkOrange
                , paddingEach
                    { top = 6
                    , bottom = 3
                    , left = 20
                    , right = 20
                    }
                , width fill
                , F.center
                , D.roundEach
                    { topLeft = 26
                    , topRight = 26
                    , bottomRight = 0
                    , bottomLeft = 0
                    }
                ]
            <|
                paragraph [] [ text title ]

        cardImageMaker : String -> Element msg
        cardImageMaker image =
            el
                [ alignRight
                , alignTop
                , paddingXY 20 20
                ]
            <|
                el
                    [ D.rounded 100
                    , D.width 5
                    , glowDeepDarkGrey
                    , D.color colourTheme.backgroundDarkGrey
                    , B.color colourTheme.backgroundDarkGrey
                    ]
                <|
                    E.image
                        ([ alignRight
                         , alignTop
                         , D.rounded 100
                         , clip
                         ]
                            ++ (case ( device.class, device.orientation ) of
                                    ( Phone, Portrait ) ->
                                        [ E.width <| px 45
                                        , E.height <| px 45
                                        ]

                                    ( Tablet, Portrait ) ->
                                        [ E.width <| px 45
                                        , E.height <| px 45
                                        ]

                                    _ ->
                                        [ E.width <| px 90
                                        , E.height <| px 90
                                        ]
                               )
                        )
                        { src = image
                        , description = ""
                        }

        cardInner : String -> List (Element msg) -> Element msg
        cardInner title elements =
            column
                [ width fill ]
                [ cardTitleMaker title
                , cardStuff <|
                    row
                        [ width fill ]
                        elements
                ]

        cardOuter : Element msg -> Element msg
        cardOuter elements =
            el
                [ width (fill |> minimum 100)
                , width (fill |> maximum 875)
                , padding 10
                , centerX
                ]
            <|
                el
                    [ E.width fill
                    , D.width 5
                    , D.color colourTheme.backgroundDarkGrey
                    , D.rounded 32
                    , glowDeepDarkGrey
                    , mouseOver
                        [ D.color colourTheme.textDarkOrange
                        , B.color colourTheme.textDarkOrange
                        , glowDeepDarkOrange
                        ]
                    , transitionStyleSlow
                    ]
                    elements

        cardWithImageWithLink : Bool -> String -> String -> String -> List (Element msg) -> Element msg
        cardWithImageWithLink linkBool title image url content =
            linkChooser
                linkBool
                (cardInner title
                    [ cardContentMaker content
                    , cardImageMaker image
                    ]
                )
                url

        cardWithNoImageWithLink : Bool -> String -> String -> List (Element msg) -> Element msg
        cardWithNoImageWithLink linkBool title url content =
            linkChooser
                linkBool
                (cardInner title
                    [ cardContentMaker content
                    ]
                )
                url

        cardWithImage : String -> String -> List (Element msg) -> Element msg
        cardWithImage title image content =
            cardOuter <|
                cardInner title
                    [ cardContentMaker content
                    , cardImageMaker image
                    ]

        cardWithNoImage : String -> List (Element msg) -> Element msg
        cardWithNoImage title content =
            cardOuter <|
                cardInner title
                    [ cardContentMaker content
                    ]

        linkChooser : Bool -> Element msg -> String -> Element msg
        linkChooser linkBool element url =
            cardOuter <|
                (if linkBool then
                    newTabLink

                 else
                    link
                )
                    [ width fill ]
                    { url = url
                    , label = element
                    }
    in
    case cardable of
        C.Contact contact ->
            el [] <| cardTitleMaker contact.contactName

        C.Cuck cuck ->
            cardWithImageWithLink
                cuck.isNewTabLink
                cuck.cuckName
                ("/cucks/" ++ cuck.cuckImage ++ ".png")
                cuck.cuckSocial
                contents

        C.BlogArticle blogArticle ->
            cardWithNoImage
                blogArticle.articleName
                contents

        C.BlogCard blogArticle ->
            cardWithImageWithLink
                blogArticle.isNewTabLink
                blogArticle.articleName
                ("/blog/" ++ blogArticle.articleImage ++ "thumb.png")
                blogArticle.articleLink
                contents

        C.Argument argument ->
            cardWithImageWithLink
                argument.isNewTabLink
                argument.argumentTitle
                ("/arguments/" ++ argument.argumentImage ++ ".png")
                argument.proofLink
                contents

        C.Gibberish gibberish ->
            cardWithImageWithLink
                gibberish.isNewTabLink
                gibberish.gibberishTitle
                ("/gibberish/" ++ gibberish.gibberishImage ++ ".png")
                gibberish.gibberishLink
                contents

        C.Service service ->
            cardWithImageWithLink
                service.isNewTabLink
                service.serviceName
                ("/services/" ++ service.serviceImage ++ ".png")
                service.serviceLink
                contents

        C.Debate debate ->
            cardWithImageWithLink
                debate.isNewTabLink
                debate.debateTitle
                ("/debate/" ++ debate.debateImage ++ ".png")
                debate.debateLink
                contents

        C.Donate donate ->
            cardWithImageWithLink
                donate.isNewTabLink
                donate.donateName
                ("/donate/" ++ donate.donateImage ++ ".png")
                donate.donateLink
                contents

        C.Interview interview ->
            cardWithImage
                interview.interviewName
                ("/interviews/" ++ interview.interviewImage ++ ".png")
                contents

        C.NutriDex nutriDex ->
            cardWithNoImage
                nutriDex.nutriDexTitle
                contents


cardContentMaker : List (Element msg) -> Element msg
cardContentMaker content =
    column
        [ spacing 8
        , width fill
        ]
        content


cardStuff : Element msg -> Element msg
cardStuff content =
    el
        [ E.height fill
        , E.width fill
        , centerX
        , B.color colourTheme.backgroundDarkGrey
        , padding 10
        , D.roundEach
            { topLeft = 0
            , topRight = 0
            , bottomRight = 26
            , bottomLeft = 26
            }
        , spacing 8
        ]
    <|
        el
            [ paddingEach
                { top = 0
                , bottom = 0
                , left = 15
                , right = 15
                }
            , spacing 8
            , width fill
            ]
            content