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

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

import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Cards.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Types as C
import Config.Helpers.Converters exposing (toTitleCase)
import Config.Helpers.Format
    exposing
        ( headerFontSizeSmall
        , paragraphFontSize
        , paragraphSpacing
        )
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (argumentHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
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
        )
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 device
        )
    <|
        List.concat
            [ [ headerMaker (R.Arguments argumentHeader) ]
            , List.map
                (\argument ->
                    cardMaker device (C.Argument argument) (contentList device argument)
                )
                argumentList
            ]


contentList : Device -> Argument -> List (Element msg)
contentList device argument =
    [ row
        [ width fill
        , paddingEach
            { top =
                case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        8

                    ( Tablet, Portrait ) ->
                        8

                    _ ->
                        0
            , right = 0
            , bottom = 0
            , left = 0
            }
        ]
        [ column [ width fill, spacing 8 ]
            [ summaryMakerDesktop device argument
            , strengthBar device argument
            ]
        , case ( device.class, device.orientation ) of
            ( Phone, Portrait ) ->
                none

            ( Tablet, Portrait ) ->
                none

            _ ->
                argumentImageMaker argument
        ]
    , tableMaker device argument
    , desktopFormalizationMaker argument
    , proofTreeButton argument.proofLink
    ]


argumentImageMaker : Argument -> Element msg
argumentImageMaker argument =
    el
        [ alignRight
        , alignTop
        , centerY
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = 20
            }
        ]
    <|
        el
            [ D.rounded 10
            , D.width 3
            , D.color colourTheme.backgroundLightGrey
            , B.color colourTheme.backgroundLightGrey
            ]
        <|
            E.image
                [ alignRight
                , alignTop
                , D.rounded 10
                , clip
                , E.width <| px 65
                , E.height <| px 65
                ]
                { src = imagePathMaker M.Argument argument.argumentImage
                , description = ""
                }


proofTreeButton : String -> Element msg
proofTreeButton url =
    newTabLink
        [ alignTop
        , alignRight
        , 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
                , headerFontSizeSmall
                , F.bold
                ]
            <|
                text
                    "Proof Tree"
        }


infoSpacing =
    E.width <| px 100


propositionMaker : Element msg
propositionMaker =
    column
        [ E.alignTop, E.alignLeft ]
        [ paragraph
            [ F.color colourTheme.textLightGrey
            , paragraphSpacing
            , headerFontSizeSmall
            , F.bold
            , 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
            , headerFontSizeSmall
            , F.bold
            ]
            [ text argument.propositionTitle
                |> el
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , paragraphFontSize
                    ]
            ]
        ]


reductioMakerDesktop : Argument -> Element msg
reductioMakerDesktop 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
            , headerFontSizeSmall
            , F.bold
            , 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
            , spacing 3
            ]
            [ text reductio ]
        ]


summaryMakerDesktop : Device -> Argument -> Element msg
summaryMakerDesktop device argument =
    (case ( device.class, device.orientation ) of
        ( Phone, Portrait ) ->
            column

        ( Tablet, Portrait ) ->
            column

        _ ->
            row
    )
        []
        [ summaryMaker
        , summaryMakerTitle argument
        ]


summaryMaker : Element msg
summaryMaker =
    column
        [ E.alignTop
        , E.alignLeft
        ]
        [ paragraph
            [ F.color colourTheme.textLightGrey
            , paragraphSpacing
            , paragraphFontSize
            , F.bold
            , infoSpacing
            , headerFontSizeSmall
            ]
            [ 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
            , F.bold
            , spacing 3
            , headerFontSizeSmall
            ]
            [ text argument.propositionSummary
                |> el
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , paragraphFontSize
                    ]
            ]
        ]


strengthBar : Device -> Argument -> Element msg
strengthBar device argument =
    (case ( device.class, device.orientation ) of
        ( Phone, Portrait ) ->
            column

        ( Tablet, Portrait ) ->
            column

        _ ->
            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
            , E.width fill
            , headerFontSizeSmall
            ]
            [ 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 : Device -> Argument -> Element msg
tableMaker device argument =
    let
        cellPadding : Attribute msg
        cellPadding =
            paddingXY 10 5
    in
    column
        [ centerX
        , E.width fill
        ]
        [ el
            [ F.color colourTheme.textLightGrey
            , paragraphSpacing
            , paragraphFontSize
            , F.bold
            , E.alignLeft
            , E.width fill
            , htmlAttribute <| H.style "position" "relative"
            ]
          <|
            E.table
                ([ D.rounded 10
                 , D.width 2
                 , D.color colourTheme.textDarkGrey
                 , clip
                 ]
                    ++ (case ( device.class, device.orientation ) of
                            ( Phone, Portrait ) ->
                                [ B.color colourTheme.backgroundSpreadsheet ]

                            ( Tablet, Portrait ) ->
                                [ B.color colourTheme.backgroundSpreadsheet ]

                            _ ->
                                []
                       )
                )
                { data = argument.definitionTable
                , columns =
                    [ { header =
                            el
                                [ F.bold
                                , D.widthEach
                                    { bottom = 1
                                    , top = 1
                                    , left = 1
                                    , right = 1
                                    }
                                , D.color colourTheme.textDarkGrey
                                , cellPadding
                                , E.width fill
                                ]
                            <|
                                el [ F.color colourTheme.textLightOrange ] <|
                                    text "Definiendum"
                      , width = fill |> maximum 30
                      , view =
                            \definition ->
                                el
                                    [ F.color colourTheme.textLightOrange
                                    , F.bold
                                    , D.widthEach
                                        { bottom = 1
                                        , top = 0
                                        , left = 1
                                        , right = 1
                                        }
                                    , D.color colourTheme.textDarkGrey
                                    , cellPadding
                                    , E.height fill
                                    ]
                                <|
                                    el [ centerX ] <|
                                        paragraph [] [ text definition.definiendum ]
                      }
                    , { header =
                            el
                                [ F.bold
                                , D.widthEach
                                    { bottom = 1
                                    , top = 1
                                    , left = 0
                                    , right = 1
                                    }
                                , D.color colourTheme.textDarkGrey
                                , cellPadding
                                , E.width fill
                                ]
                            <|
                                el
                                    [ F.color colourTheme.textLightOrange ]
                                <|
                                    text "Definiens"
                      , width = fill
                      , view =
                            \definition ->
                                el
                                    [ F.color colourTheme.textLightGrey
                                    , F.regular
                                    , D.widthEach
                                        { bottom = 1
                                        , top = 0
                                        , left = 0
                                        , right = 1
                                        }
                                    , D.color colourTheme.textDarkGrey
                                    , cellPadding
                                    , E.height fill
                                    ]
                                <|
                                    el [] <|
                                        paragraph [] [ text definition.definiens ]
                      }
                    ]
                }
        ]


argumentDesktopPadding : Attribute msg
argumentDesktopPadding =
    paddingXY 40 3


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


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
                                    , paragraphFontSize
                                    ]
                                    [ 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
        )