website/frontend/src/Pages/Donate.elm

module Pages.Donate exposing (Model, Msg, page)

import Config.Data.Identity as I exposing (..)
import Config.Helpers.CardFormat
    exposing
        ( cardContentSpacing
        , cardFormatter
        , cardMaker
        , cardTitleMaker
        , desktopCardMaker
        , desktopImageBoxSize
        , desktopImageSize
        , fieldSpacer
        , mobileCardMaker
        , mobileImageBoxSize
        , mobileImageSize
        , topLevelBox
        )
import Config.Helpers.Format
    exposing
        ( paragraphFontSize
        , paragraphSpacing
        )
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.StrengthBar
    exposing
        ( barMaker
        , barPadding
        )
import Config.Helpers.ToolTip exposing (tooltip)
import Config.Helpers.Viewport exposing (..)
import Config.Pages.Donate.Records.Cardano exposing (donateCardano)
import Config.Pages.Donate.Records.KoFi exposing (donateKoFi)
import Config.Pages.Donate.Records.LiberaPay exposing (donateLiberaPay)
import Config.Pages.Donate.Records.Merch exposing (donateMerch)
import Config.Pages.Donate.Records.Patreon exposing (donatePatreon)
import Config.Pages.Donate.Records.PayPal exposing (donatePayPal)
import Config.Pages.Donate.Records.Stripe exposing (donateStripe)
import Config.Pages.Donate.Records.YouTube exposing (donateYouTube)
import Config.Pages.Donate.Types exposing (..)
import Config.Helpers.Header exposing (..)
import Config.Helpers.Header
    exposing
        ( Header
        , headerMaker
        )
import Config.Style.Colour as T exposing (..)
import Effect exposing (Effect)
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 Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import Task
import View exposing (View)


page : Shared.Model -> Route () -> Page Model Msg
page shared route =
    Page.new
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view shared
        }
        |> Page.withLayout toLayout


toLayout : Model -> Layouts.Layout Msg
toLayout model =
    Layouts.Navbar {}



-- INIT


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init () =
    ( {}
    , Effect.map
        (\_ -> NoOp)
        (Effect.sendCmd resetViewport)
    )



-- UPDATE


type Msg
    = NoOp


update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Effect.none
            )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Shared.Model -> Model -> View Msg
view shared model =
    { title = pageNames.pageDonate
    , attributes = []
    , element = donateContainer shared.device
    }


donateContainer : Device -> Element msg
donateContainer device =
    topLevelContainer (donateList device)


donateList : Device -> Element msg
donateList device =
    column
        (case ( device.class, device.orientation ) of
            _ ->
                pageList
        )
    <|
        List.concat
            [ List.map headerMaker
                [ donateHeader ]
            , (case ( device.class, device.orientation ) of
                ( Phone, Portrait ) ->
                    List.map donateMakerMobile

                ( Tablet, Portrait ) ->
                    List.map donateMakerMobile

                _ ->
                    List.map donateMaker
              )
                [ donateLiberaPay
                , donateStripe
                , donatePatreon
                , donateCardano
                , donateKoFi
                , donateYouTube
                , donateMerch
                ]
            ]


donateHeader : Header
donateHeader =
    let
        name =
            "Donate"
    in
    { headerTitle = String.toUpper name
    , headerBody = "My site, research, and content all cost time and money to run. If you find my contributions valuable, please consider supporting my work on any of the platforms listed below!"
    }


donateMaker : Donate -> Element msg
donateMaker donate =
    row
        topLevelBox
        [ desktopCardMaker desktopImageBoxSize desktopImageSize (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
                        [ row [ width fill, spacing 10 ]
                            [ mobileCardMaker mobileImageBoxSize
                                mobileImageSize
                                (donateImage donate)
                                (donateLink donate)
                            , column
                                [ width fill ]
                                [ 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
        ([ F.color colourTheme.textLightGrey
         , paragraphSpacing
         , paragraphFontSize
         , F.bold
         ]
            ++ [ 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
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        ]
        [ column
            [ alignTop
            , width <| px 80
            ]
            [ text "Pros:"
            ]
        ]


conTitleMaker : Donate -> Element msg
conTitleMaker donate =
    row
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        ]
        [ 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
        ([ F.color colourTheme.textLightGrey
         , paragraphSpacing
         , paragraphFontSize
         , F.bold
         , alignLeft
         ]
            ++ [ 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
        ([ F.color colourTheme.textLightGrey
         , paragraphSpacing
         , paragraphFontSize
         , F.bold
         , alignLeft
         ]
            ++ [ 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
                ([ F.color colourTheme.textLightGrey
                 , paragraphSpacing
                 , paragraphFontSize
                 , F.bold
                 ]
                    ++ [ 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
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ 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
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ 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 = "" }