website/frontend/src/Donate/Helpers.elm

module Donate.Helpers exposing (..)

import Config.CardFormat exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Config.StrengthBar exposing (..)
import Config.ToolTip exposing (..)
import Donate.Methods.Cardano exposing (donateCardano)
import Donate.Methods.KoFi exposing (donateKoFi)
import Donate.Methods.LiberaPay exposing (donateLiberaPay)
import Donate.Methods.Merch exposing (donateMerch)
import Donate.Methods.Patreon exposing (donatePatreon)
import Donate.Methods.PayPal exposing (donatePayPal)
import Donate.Methods.YouTube exposing (donateYouTube)
import Donate.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)


donateMaker : Donate -> Element msg
donateMaker donate =
    row
        topLevelBox
        [ cardImageMaker (donateImage donate) (donateLink donate)
        , cardMaker
            [ cardTitleMaker (donateTitle donate)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ feeMaker donate
                        , preferenceMaker donate
                        , tableMaker donate
                        , proTitleMaker donate
                        , proMaker donate
                        , conTitleMaker donate
                        , conMaker donate
                        ]
                    ]
                ]
            ]
        ]


donateMakerMobile : Donate -> Element msg
donateMakerMobile donate =
    row
        topLevelBox
        [ column [] []
        , cardMaker
            [ cardTitleMaker (donateTitle donate)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ cardImageMakerMobile (donateImage donate)
                            (donateLink donate)
                        , feeMaker donate
                        , preferenceMaker donate
                        , tableMakerMobile donate
                        , proTitleMaker donate
                        , proMaker donate
                        , conTitleMaker donate
                        , conMaker donate
                        ]
                    ]
                ]
            ]
        ]


donateImage :
    Donate
    ->
        { src : String
        , description : String
        }
donateImage donate =
    { src = "donate/" ++ donate.donateImage ++ ".png"
    , description = donate.donateName
    }


donateTitle : Donate -> String
donateTitle donate =
    donate.donateName


donateLink : Donate -> String
donateLink donate =
    donate.donateLink


donateWidth =
    width <| px 45


feeMaker : Donate -> Element msg
feeMaker donate =
    row
        (paragraphBoldFormat
            ++ [ F.size 18
               , E.width fill
               ]
        )
        [ column
            [ alignTop
            , donateWidth
            ]
            [ text "Fees:"
            ]
        , column
            [ E.width fill
            , alignLeft
            ]
            [ paragraph [ F.regular ]
                [ el [ F.color colourTheme.textLightOrange ] <|
                    text donate.donateFees
                ]
            ]
        ]


proTitleMaker : Donate -> Element msg
proTitleMaker donate =
    row paragraphBoldFormat
        [ column
            [ alignTop
            , width <| px 80
            ]
            [ text "Pros:"
            ]
        ]


conTitleMaker : Donate -> Element msg
conTitleMaker donate =
    row paragraphBoldFormat
        [ column
            [ alignTop
            , width <| px 80
            ]
            [ text "Cons:"
            ]
        ]


proMaker : Donate -> Element msg
proMaker donate =
    column
        [ spacing 8
        , width fill
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = 35
            }
        ]
    <|
        List.map2 (\x y -> makePro x)
            donate.donatePros
            (List.range 1 (List.length donate.donatePros))


makePro : Pros -> Element msg
makePro pro =
    column
        (paragraphAlignLeft
            ++ [ spacing 8
               , width fill
               ]
        )
        [ paragraph [ F.regular ]
            [ text ("‣ " ++ pro.pro) ]
        ]


conMaker : Donate -> Element msg
conMaker donate =
    column
        [ spacing 8
        , width fill
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = 35
            }
        ]
    <|
        List.map2 (\x y -> makeCon x)
            donate.donateCons
            (List.range 1 (List.length donate.donateCons))


makeCon : Cons -> Element msg
makeCon con =
    column
        (paragraphAlignLeft
            ++ [ spacing 8
               , width fill
               ]
        )
        [ paragraph [ F.regular ]
            [ text ("‣ " ++ con.con) ]
        ]


preferenceMaker : Donate -> Element msg
preferenceMaker donate =
    row
        [ width fill
        , height fill
        ]
        [ column
            [ E.alignTop
            , E.alignLeft
            ]
            [ paragraph
                (paragraphBoldFormat
                    ++ [ F.size 18
                       , alignLeft
                       , E.width fill
                       ]
                )
                [ el
                    [ tooltip
                        "This represents how strongly I prefer a given platform relative to other platforms."
                    ]
                    (el
                        [ paddingEach
                            { top = 0
                            , right = 10
                            , bottom = 0
                            , left = 0
                            }
                        ]
                     <|
                        text "Preference:"
                    )
                ]
            ]
        , barPadding
            [ barMaker getPreferenceTooltip donate.donatePreference ]
        ]


getPreferenceTooltip : Int -> String
getPreferenceTooltip num =
    case num of
        0 ->
            "Disdain this platform."

        1 ->
            "Very negative towards this platform."

        2 ->
            "Strongly dislike this platform."

        3 ->
            "Dislike this platform."

        4 ->
            "Somewhat dislike this platform."

        5 ->
            "Neutral, no strong feelings."

        6 ->
            "Somewhat like this platform."

        7 ->
            "Like this platform."

        8 ->
            "Strongly like this platform."

        9 ->
            "Very positive towards this platform."

        10 ->
            "Absolutely love this platform!"

        _ ->
            "Preference is out of bounds."


tableMaker : Donate -> Element msg
tableMaker donate =
    column
        [ centerX
        , E.width fill
        ]
        [ wrappedRow
            (paragraphBoldFormat
                ++ [ E.alignLeft
                   , E.width fill
                   , htmlAttribute <| H.style "position" "relative"
                   ]
            )
            [ E.table
                [ spacing 0
                , D.rounded 10
                , D.width 2
                , D.color colourTheme.textDarkGrey
                , clip
                ]
                { data = donate.donateFeatures
                , columns =
                    List.map createColumn
                        [ { label = "Zero Fees"
                          , getter = .free
                          }
                        , { label = "Subscriptions"
                          , getter = .subscriptions
                          }
                        , { label = "User Friendly"
                          , getter = .userFriendly
                          }
                        , { label = "Anonymous"
                          , getter = .anonymous
                          }
                        , { label = "Rewards"
                          , getter = .rewardTiers
                          }
                        ]
                }
            ]
        ]


tableMakerMobile : Donate -> Element msg
tableMakerMobile donate =
    column
        [ centerX
        , E.width fill
        ]
        [ wrappedRow
            (paragraphBoldFormat
                ++ [ E.alignLeft
                   , E.width fill
                   , htmlAttribute <| H.style "position" "relative"
                   ]
            )
            [ E.table
                [ spacing 0
                , D.rounded 10
                , D.width 2
                , D.color colourTheme.textDarkGrey
                , clip
                ]
                { data = donate.donateFeatures
                , columns =
                    List.map createColumn
                        [ { label = "Free"
                          , getter = .free
                          }
                        , { label = "Subs"
                          , getter = .subscriptions
                          }
                        , { label = "Easy"
                          , getter = .userFriendly
                          }
                        , { label = "Safe"
                          , getter = .anonymous
                          }
                        ]
                }
            ]
        ]


createColumn : { label : String, getter : Features -> Maybe Bool } -> Column Features msg
createColumn { label, getter } =
    { header =
        el
            [ F.bold
            , D.widthEach
                { bottom = 1
                , top = 1
                , left = 1
                , right = 1
                }
            , D.color colourTheme.textDarkGrey
            , padding 8
            , E.width fill
            , F.center
            ]
            (text label)
            |> el [ F.color colourTheme.textLightOrange ]
    , width = fill
    , view =
        \feature ->
            row
                [ F.color colourTheme.textLightOrange
                , F.bold
                , D.widthEach
                    { bottom = 1
                    , top = 0
                    , left = 1
                    , right = 1
                    }
                , D.color colourTheme.textDarkGrey
                , padding 8
                , E.height fill
                ]
                [ row [ centerX ]
                    [ paragraph []
                        [ E.image
                            [ E.width <| px 30
                            , E.height <| px 30
                            ]
                            (featureToString (getter feature))
                        ]
                    ]
                ]
    }


featureToString : Maybe Bool -> { src : String, description : String }
featureToString maybeBool =
    case maybeBool of
        Just True ->
            { src = "donate/checkmark.png", description = "" }

        Just False ->
            { src = "donate/ex.png", description = "" }

        Nothing ->
            { src = "donate/question.png", description = "" }