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.Inner.Helpers
    exposing
        ( argumentButton
        , bodyFormat
        , detailBodyMaker
        , detailFormat
        , detailSpacing
        , detailTitleMaker
        )
import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Outer.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.Helpers
    exposing
        ( ThemeColor(..)
        , colourTheme
        )
import Config.Style.Glow
    exposing
        ( glowDeepDarkGrey
        , glowDeepDarkOrange
        )
import Config.Style.Images exposing (imageSquareMaker)
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 Route.Path as Path
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 =
    let
        image : String -> Element msg
        image size =
            el
                [ alignLeft
                , alignTop
                , paddingEach
                    { top = 0
                    , right = 10
                    , bottom = 0
                    , left = 0
                    }
                ]
            <|
                imageSquareMaker device (imagePathMaker M.Argument argument.argumentImage) True size
    in
    [ row
        [ width fill
        , paddingEach
            { top =
                case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        8

                    ( Tablet, Portrait ) ->
                        8

                    _ ->
                        0
            , right = 0
            , bottom = 0
            , left = 0
            }
        ]
        [ detailFormat column
            [ detailFormat paragraph
                [ case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        none

                    ( Tablet, Portrait ) ->
                        none

                    _ ->
                        image "Big"
                , el ([ height fill ] ++ bodyFormat TextLightGrey) <| text argument.propositionSummary
                ]
            , detailFormat row
                [ strengthMaker
                , barMaker getConfidenceTooltip argument.argumentCertainty
                ]
            ]
        ]
    , tableMaker device argument
    , formalizationMaker device argument
    , el [alignRight] <|
        row [ width fill, spacing 20 ]
            [ argumentButton (Path.toString Path.Contact_Criticism) "Reject Premise"
            , argumentButton argument.proofLink "Proof Tree"
            ]
    ]


strengthMaker : Element msg
strengthMaker =
    el
        [ tooltip
            "This represents my confidence in the soundness of the argument."
        ]
    <|
        detailTitleMaker TextLightOrange "Confidence:"


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
            [ 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
                                ]
                            <|
                                detailTitleMaker
                                    TextLightOrange
                                    "Definiendum"
                      , width = fill |> maximum 30
                      , view =
                            \definition ->
                                el
                                    [ D.widthEach
                                        { bottom = 1
                                        , top = 0
                                        , left = 1
                                        , right = 1
                                        }
                                    , D.color colourTheme.textDarkGrey
                                    , cellPadding
                                    , E.height fill
                                    ]
                                <|
                                    el
                                        [ centerX
                                        , centerY
                                        ]
                                    <|
                                        paragraph [] [ detailTitleMaker TextLightOrange definition.definiendum ]
                      }
                    , { header =
                            el
                                [ D.widthEach
                                    { bottom = 1
                                    , top = 1
                                    , left = 0
                                    , right = 1
                                    }
                                , D.color colourTheme.textDarkGrey
                                , cellPadding
                                , E.width fill
                                ]
                            <|
                                detailTitleMaker TextLightOrange "Definiens"
                      , width = fill
                      , view =
                            \definition ->
                                el
                                    [ D.widthEach
                                        { bottom = 1
                                        , top = 0
                                        , left = 0
                                        , right = 1
                                        }
                                    , D.color colourTheme.textDarkGrey
                                    , cellPadding
                                    , E.height fill
                                    ]
                                <|
                                    el [] <|
                                        paragraph [] [ detailBodyMaker TextLightGrey (text definition.definiens) ]
                      }
                    ]
                }
        ]


formalizationMaker : Device -> Argument -> Element msg
formalizationMaker device argument =
    column
        [ centerX
        , E.width fill
        , spacing 10
        ]
        (List.indexedMap
            (\index argumentEntry ->
                column
                    [ paddingXY
                        (case ( device.class, device.orientation ) of
                            ( Phone, Portrait ) ->
                                0

                            ( Tablet, Portrait ) ->
                                0

                            _ ->
                                40
                        )
                        3
                    ]
                    (List.indexedMap
                        (\entryIndex entryWithNotation ->
                            column
                                [ centerX
                                , F.center
                                , detailSpacing
                                , E.width fill
                                ]
                                [ paragraph
                                    [ width fill ]
                                    [ detailTitleMaker
                                        TextLightOrange
                                        (if entryIndex < List.length argumentEntry.premises then
                                            "P" ++ String.fromInt (entryIndex + 1) ++ ") "

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

                                             else
                                                argumentEntry.conclusion
                                            )
                                        )
                                        |> el
                                            []
                                    ]
                                , paragraph
                                    []
                                    [ detailTitleMaker
                                        TextLightOrange
                                        (if entryIndex < List.length argumentEntry.premises then
                                            "(" ++ entryWithNotation.notation ++ ")"

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