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

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

import Config.Data.Identity
    exposing
        ( pageNames
        )
import Config.Helpers.Cards.Types as C exposing (..)
import Config.Helpers.Converters exposing (formatName)
import Config.Helpers.Format
    exposing
        ( divider
        , headerFontSizeBig
        , headerFontSizeMedium
        , paragraphFontSize
        , paragraphSpacing
        )
import Config.Helpers.Response exposing (contentContainer)
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
        hasLink : Bool
        hasLink =
            case cardable of
                C.Contact _ ->
                    False

                C.Cuck c ->
                    True

                C.BlogArticle _ ->
                    False

                C.BlogCard _ ->
                    True

                C.Argument _ ->
                    True

                C.Gibberish _ ->
                    True

                C.Service _ ->
                    True

                C.Debate _ ->
                    True

                C.Donate _ ->
                    True

                C.Interview _ ->
                    False

                C.NutriDex _ ->
                    False

                C.ServicePage _ ->
                    False

        cardTitleMaker : String -> Maybe String -> Element msg
        cardTitleMaker title maybeUrl =
            el
                ([ headerFontSizeMedium
                 , F.bold
                 , F.color colourTheme.textLightGrey
                 , width fill
                 ]
                    ++ (case ( device.class, device.orientation ) of
                            ( Phone, Portrait ) ->
                                []

                            ( Tablet, Portrait ) ->
                                []

                            _ ->
                                [ F.center
                                , B.color colourTheme.textDarkOrange
                                , D.roundEach
                                    { topLeft = 26
                                    , topRight = 26
                                    , bottomRight = 0
                                    , bottomLeft = 0
                                    }
                                , paddingEach
                                    { top = 6
                                    , bottom = 3
                                    , left = 20
                                    , right = 20
                                    }
                                ]
                       )
                )
            <|
                column
                    [ width fill
                    , spacing 10
                    ]
                    [ case ( device.class, device.orientation ) of
                        ( Phone, Portrait ) ->
                            case cardable of
                                C.NutriDex _ ->
                                    none

                                C.Contact _ ->
                                    none

                                _ ->
                                    divider

                        ( Tablet, Portrait ) ->
                            case cardable of
                                C.NutriDex _ ->
                                    none

                                C.Contact _ ->
                                    none

                                _ ->
                                    divider

                        _ ->
                            none
                    , case cardable of
                        C.BlogCard blogArticle ->
                            case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    image
                                        [ width fill
                                        , paddingEach
                                            { top = 8
                                            , bottom = 0
                                            , left = 0
                                            , right = 0
                                            }
                                        ]
                                        { src = "/blog/" ++ blogArticle.articleImage ++ ".png", description = "" }

                                ( Tablet, Portrait ) ->
                                    image
                                        [ width fill
                                        , paddingEach
                                            { top = 8
                                            , bottom = 0
                                            , left = 0
                                            , right = 0
                                            }
                                        ]
                                        { src = "/blog/" ++ blogArticle.articleImage ++ ".png", description = "" }

                                _ ->
                                    none

                        _ ->
                            none
                    , row [ width fill, spacing 10 ]
                        [ case cardable of
                            C.NutriDex _ ->
                                case ( device.class, device.orientation ) of
                                    ( Phone, Portrait ) ->
                                        none

                                    ( Tablet, Portrait ) ->
                                        none

                                    _ ->
                                        paragraph [] [ text title ]

                            C.Contact _ ->
                                case ( device.class, device.orientation ) of
                                    ( Phone, Portrait ) ->
                                        none

                                    ( Tablet, Portrait ) ->
                                        none

                                    _ ->
                                        paragraph [] [ text title ]

                            _ ->
                                paragraph [] [ text title ]
                        , el
                            [ alignRight
                            ]
                            (case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    case maybeUrl of
                                        Just url ->
                                            readMoreLink url

                                        Nothing ->
                                            none

                                ( Tablet, Portrait ) ->
                                    case maybeUrl of
                                        Just url ->
                                            readMoreLink url

                                        Nothing ->
                                            none

                                _ ->
                                    none
                            )
                        ]
                    ]

        readMoreLink : String -> Element msg
        readMoreLink url =
            link [ 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
                        , paragraphFontSize
                        ]
                    <|
                        text
                            (case cardable of
                                C.Donate _ ->
                                    "Support!"

                                C.Argument _ ->
                                    "Proof Tree!"

                                _ ->
                                    "Read More!"
                            )
                }

        cardImageMaker : String -> Element msg
        cardImageMaker image =
            el
                [ alignRight
                , alignTop
                , padding 10
                ]
            <|
                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 -> Maybe String -> List (Element msg) -> Element msg
        cardInner title maybeUrl elements =
            column
                [ width fill
                , spacing 0
                ]
                [ cardTitleMaker title maybeUrl
                , (case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        el
                            [ E.width fill
                            , centerX
                            ]

                    ( Tablet, Portrait ) ->
                        el
                            [ E.width fill
                            , centerX
                            ]

                    _ ->
                        cardStuff
                  )
                  <|
                    row
                        [ width fill
                        ]
                        elements
                ]

        cardOuter : Element msg -> Element msg
        cardOuter elements =
            contentContainer <|
                el
                    ([ E.width fill
                     ]
                        ++ (case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    []

                                ( Tablet, Portrait ) ->
                                    []

                                _ ->
                                    [ E.width fill
                                    , D.width 5
                                    , D.color colourTheme.backgroundDarkGrey
                                    , D.rounded 32
                                    , glowDeepDarkGrey
                                    ]
                                        ++ (if hasLink then
                                                [ mouseOver
                                                    [ D.color colourTheme.textDarkOrange
                                                    , B.color colourTheme.textDarkOrange
                                                    , glowDeepDarkOrange
                                                    ]
                                                , transitionStyleSlow
                                                ]

                                            else
                                                []
                                           )
                           )
                    )
                    elements

        cardWithImageWithLink : Bool -> String -> String -> String -> List (Element msg) -> Element msg
        cardWithImageWithLink linkBool title image url content =
            linkChooser
                linkBool
                (cardInner title
                    (if hasLink then
                        Just url

                     else
                        Nothing
                    )
                    [ cardContentMaker content
                    , case ( device.class, device.orientation ) of
                        ( Phone, Portrait ) ->
                            none

                        ( Tablet, Portrait ) ->
                            none

                        _ ->
                            cardImageMaker image
                    ]
                )
                url

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

        cardWithImage : String -> String -> List (Element msg) -> Element msg
        cardWithImage title image content =
            cardOuter <|
                cardInner title
                    Nothing
                    [ cardContentMaker content
                    , case ( device.class, device.orientation ) of
                        ( Phone, Portrait ) ->
                            none

                        ( Tablet, Portrait ) ->
                            none

                        _ ->
                            cardImageMaker image
                    ]

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

        linkChooser : Bool -> Element msg -> String -> Element msg
        linkChooser linkBool element url =
            cardOuter <|
                case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        el [ width fill ] <| element

                    ( Tablet, Portrait ) ->
                        el [ width fill ] <| element

                    _ ->
                        (if linkBool then
                            newTabLink

                         else
                            link
                        )
                            [ width fill ]
                            { url = url
                            , label = element
                            }
    in
    case cardable of
        C.Contact contact ->
            cardWithNoImage
                (String.toUpper contact.contactName)
                contents

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

        C.BlogArticle blogArticle ->
            cardWithNoImage
                (String.toUpper blogArticle.articleName)
                contents

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

        C.Argument argument ->
            cardWithNoImageWithLink
                argument.isNewTabLink
                argument.argumentTitle
                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
                (String.toUpper nutriDex.nutriDexTitle)
                contents

        C.ServicePage service ->
            cardWithNoImage
                (String.toUpper service.serviceName)
                contents


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


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