website/frontend/src/Pages/Debate/Arguments.elm

module Pages.Debate.Arguments exposing (Model, Msg, page)

import Config.Data.Identity exposing (pageNames)
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.Header
    exposing
        ( Header
        , headerMaker
        )
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 (resetViewport)
import Config.Pages.Debate.Arguments.List
    exposing
        ( argumentList
        , argumentListNumber
        )
import Config.Pages.Debate.Arguments.Types exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Glow
    exposing
        ( glowDeepDarkGrey
        , glowDeepDarkOrange
        )
import Config.Style.Transitions exposing (transitionStyleSlow)
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 exposing (div, hr)
import Html.Attributes as H exposing (style, title, wrap)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
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.batch
        [ Effect.map
            (\_ -> NoOp)
            (Effect.sendCmd resetViewport)
        , Effect.none
        ]
    )



-- 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 = "debate (" ++ pageNames.pageArguments ++ ")"
    , attributes = []
    , element = debateContainer shared.device
    }


debateContainer : Device -> Element msg
debateContainer device =
    topLevelContainer (debateList device)


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

                ( Tablet, Portrait ) ->
                    List.map argumentMakerMobile

                _ ->
                    List.map argumentMaker
              )
                argumentList
            ]


argumentHeader : Header
argumentHeader =
    let
        name =
            "Arguments"
    in
    { headerTitle = String.toUpper name
    , headerBody = "This page features arguments that I hold to be sound. I'm open to hearing all challenges, as I am ready to engage with and defend any argument listed."
    }


argumentMaker : Argument -> Element msg
argumentMaker argument =
    row
        topLevelBox
        [ desktopCardMaker desktopImageBoxSize desktopImageSize (argumentImage argument) (argumentLink argument)
        , cardMaker
            [ cardTitleMaker argument.argumentTitle
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ propositionMakerDesktop argument
                        , reductioMakerDesktop argument
                        , summaryMakerDesktop argument
                        , strengthBar argument
                        , tableMaker argument
                        , desktopFormalizationMaker argument
                        ]
                    ]
                ]
            ]
        ]


argumentMakerMobile : Argument -> Element msg
argumentMakerMobile argument =
    row
        topLevelBox
        [ column [] []
        , cardMaker
            [ cardTitleMaker argument.argumentTitle
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ row [ spacing 10, E.width fill ]
                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (argumentImage argument) (argumentLink argument)
                            , column [ E.width fill ]
                                [ propositionMakerMobile argument
                                ]
                            ]
                        , reductioMakerMobile argument
                        , summaryMakerMobile argument
                        , strengthBar argument
                        , tableMaker argument
                        , mobileFormalizationMaker argument
                        ]
                    ]
                ]
            ]
        ]


argumentImage : Argument -> { src : String, description : String }
argumentImage argument =
    { src = "/arguments/" ++ argument.argumentImage ++ ".png"
    , description = argument.argumentTitle
    }


argumentLink : Argument -> String
argumentLink argument =
    argument.proofLink


infoSpacing =
    E.width <| px 100


propositionMakerDesktop : Argument -> Element msg
propositionMakerDesktop argument =
    row []
        [ propositionMaker
        , propositionTitleMaker argument
        ]


propositionMakerMobile : Argument -> Element msg
propositionMakerMobile argument =
    column []
        [ propositionMaker
        , propositionTitleMaker argument
        ]


propositionMaker : Element msg
propositionMaker =
    column
        [ E.alignTop, E.alignLeft ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18
                   , infoSpacing
                   ]
            )
            [ el
                [ tooltip
                    "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
                ]
                (text "Proposition:")
                |> el [ F.color colourTheme.textLightOrange ]
            ]
        ]


propositionTitleMaker : Argument -> Element msg
propositionTitleMaker argument =
    column
        [ E.width fill, E.alignLeft ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18 ]
            )
            [ text argument.propositionTitle
                |> el
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , F.size 16
                    ]
            ]
        ]


reductioMakerDesktop : Argument -> Element msg
reductioMakerDesktop argument =
    case argument.propositionReductio of
        "" ->
            none

        reductio ->
            row
                []
                [ reductioMaker
                , reductioMakerTitle reductio
                ]


reductioMakerMobile : Argument -> Element msg
reductioMakerMobile argument =
    case argument.propositionReductio of
        "" ->
            none

        reductio ->
            row
                []
                [ reductioMaker
                , reductioMakerTitle reductio
                ]


reductioMaker : Element msg
reductioMaker =
    column
        [ E.alignTop, E.alignLeft ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18
                   , infoSpacing
                   ]
            )
            [ el
                [ tooltip
                    "This is the position from which the reductio ad absurdum is derived."
                ]
                (text "Reductio:")
                |> el [ F.color colourTheme.textLightOrange ]
            ]
        ]


reductioMakerTitle : String -> Element msg
reductioMakerTitle reductio =
    column [ E.width fill, E.alignLeft ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.size 16
                   , spacing 3
                   ]
            )
            [ text reductio ]
        ]


summaryMakerDesktop : Argument -> Element msg
summaryMakerDesktop argument =
    row []
        [ summaryMaker
        , summaryMakerTitle argument
        ]


summaryMakerMobile : Argument -> Element msg
summaryMakerMobile argument =
    column []
        [ summaryMaker
        , summaryMakerTitle argument
        ]


summaryMaker : Element msg
summaryMaker =
    column
        [ E.alignTop
        , E.alignLeft
        ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18
                   , infoSpacing
                   ]
            )
            [ el
                [ tooltip
                    "The following information provides additional context and insight into the reasoning behind the argument."
                ]
                (text "Summary:")
                |> el [ F.color colourTheme.textLightOrange ]
            ]
        ]


summaryMakerTitle : Argument -> Element msg
summaryMakerTitle argument =
    column
        [ E.width fill
        , E.alignLeft
        ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18
                   , spacing 3
                   ]
            )
            [ text argument.propositionSummary
                |> el
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , F.size 16
                    ]
            ]
        ]


strengthBar : Argument -> Element msg
strengthBar argument =
    row [ E.width fill ]
        [ strengthMaker
        , strengthMakerBar argument
        ]


strengthMaker : Element msg
strengthMaker =
    column
        [ E.alignTop
        , E.alignLeft
        ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.size 18
                   , E.width fill
                   ]
            )
            [ el
                [ tooltip
                    "This represents my confidence in the soundness of the argument."
                ]
                (el
                    [ paddingEach
                        { top = 0
                        , right = 5
                        , bottom = 0
                        , left = 0
                        }
                    ]
                 <|
                    text "Confidence:"
                )
                |> el [ F.color colourTheme.textLightOrange ]
            ]
        ]


strengthMakerBar : Argument -> Element msg
strengthMakerBar argument =
    barPadding
        [ barMaker getConfidenceTooltip argument.argumentCertainty ]


getConfidenceTooltip : Int -> String
getConfidenceTooltip num =
    case num of
        0 ->
            "Extremely low. Speculative reasoning."

        1 ->
            "Very low. Extremely weak reasoning."

        2 ->
            "Low. Weak reasoning."

        3 ->
            "Kinda low. Somewhat weak reasoning."

        4 ->
            "Below average. More weak than strong."

        5 ->
            "Moderate. OK reasoning."

        6 ->
            "Above average. More strong than weak."

        7 ->
            "Kinda high. Somewhat strong reasoning."

        8 ->
            "High. Robust reasoning."

        9 ->
            "Very high. Extremely robust reasoning."

        10 ->
            "Extremely high. Air tight reasoning."

        _ ->
            "Confidence level out of expected range."


tableMaker : Argument -> Element msg
tableMaker argument =
    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 = argument.definitionTable
                , columns =
                    [ { header =
                            el
                                [ F.bold
                                , D.widthEach
                                    { bottom = 1
                                    , top = 1
                                    , left = 1
                                    , right = 1
                                    }
                                , D.color colourTheme.textDarkGrey
                                , padding 8
                                , E.width fill
                                ]
                                (text "Definiendum")
                                |> el [ F.color colourTheme.textLightOrange ]
                      , width = fill |> maximum 50
                      , view =
                            \definition ->
                                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 [] [ text definition.definiendum ]
                                        ]
                                    ]
                      }
                    , { header =
                            el
                                [ F.bold
                                , D.widthEach
                                    { bottom = 1
                                    , top = 1
                                    , left = 0
                                    , right = 1
                                    }
                                , D.color colourTheme.textDarkGrey
                                , padding 8
                                , E.width fill
                                ]
                                (text "Definiens")
                                |> el [ F.color colourTheme.textLightOrange ]
                      , width = fill
                      , view =
                            \definition ->
                                paragraph
                                    [ F.color colourTheme.textLightGrey
                                    , F.regular
                                    , D.widthEach
                                        { bottom = 1
                                        , top = 0
                                        , left = 0
                                        , right = 1
                                        }
                                    , D.color colourTheme.textDarkGrey
                                    , padding 8
                                    , E.height fill
                                    ]
                                    [ row []
                                        [ paragraph [] [ text definition.definiens ]
                                        ]
                                    ]
                      }
                    ]
                }
            ]
        ]


argumentDesktopPadding : Attribute msg
argumentDesktopPadding =
    paddingXY 40 3


argumentMobilePadding : Attribute msg
argumentMobilePadding =
    paddingXY 0 3


desktopFormalizationMaker : Argument -> Element msg
desktopFormalizationMaker argument =
    formalizationMaker argument argumentDesktopPadding


mobileFormalizationMaker : Argument -> Element msg
mobileFormalizationMaker argument =
    formalizationMaker argument argumentMobilePadding


formalizationMaker : Argument -> Attribute msg -> Element msg
formalizationMaker argument padding =
    column
        [ centerX
        , E.width fill
        , spacing 10
        ]
        (List.indexedMap
            (\index argumentEntry ->
                column
                    ([ F.color colourTheme.textLightGrey
                     , paragraphSpacing
                     , paragraphFontSize
                     ]
                        ++ [ spacing 3
                           , centerX
                           , E.width fill
                           , padding
                           ]
                    )
                    (List.indexedMap
                        (\entryIndex entryWithNotation ->
                            column
                                [ centerX
                                , F.center
                                , spacing 3
                                , E.width fill
                                ]
                                [ paragraph
                                    [ F.color colourTheme.textLightOrange
                                    , F.bold
                                    , spacing 3
                                    , F.size 17
                                    ]
                                    [ text
                                        (if entryIndex < List.length argumentEntry.premises then
                                            "P" ++ String.fromInt (entryIndex + 1) ++ ") "

                                         else
                                            "C) "
                                        )
                                    , text
                                        (if entryIndex < List.length argumentEntry.premises then
                                            entryWithNotation.premise

                                         else
                                            argumentEntry.conclusion
                                        )
                                        |> el
                                            [ F.color colourTheme.textLightGrey
                                            , F.regular
                                            , E.width fill
                                            ]
                                    ]
                                , paragraph
                                    [ centerX
                                    , F.center
                                    , spacing 3
                                    , E.width fill
                                    , F.color colourTheme.textLightOrange
                                    , F.bold
                                    ]
                                    [ text
                                        (if entryIndex < List.length argumentEntry.premises then
                                            "(" ++ entryWithNotation.notation ++ ")"

                                         else
                                            "(∴" ++ argumentEntry.conclusionNotation ++ ")"
                                        )
                                    ]
                                ]
                        )
                        (argumentEntry.premises ++ [ { premise = argumentEntry.conclusion, notation = argumentEntry.conclusionNotation } ])
                    )
            )
            argument.argumentFormalization
        )