website/frontend/src/Debate/Helpers.elm

module Debate.Helpers exposing (..)

import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Debate.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Events as V exposing (..)
import Element.Font as F exposing (..)
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)


argumentMaker : Argument -> Element msg
argumentMaker argument =
    row
        [ spacing 20
        , E.width fill
        , E.height fill
        , E.alignTop
        , E.alignRight
        ]
        [ column
            [ E.width <| px 115
            , E.height <| px 115
            , E.alignTop
            , E.alignRight
            ]
            [ column
                [ D.rounded 100
                , D.width 5
                , D.color colourTheme.cardBackground
                ]
                [ E.image
                    [ E.alignRight
                    , alignTop
                    , D.rounded 100
                    , clip
                    , E.width <| px 90
                    , E.height <| px 90
                    ]
                    { src = "arguments/" ++ argument.argumentImage ++ ".png"
                    , description = argument.argumentTitle
                    }
                ]
            ]
        , column
            [ E.width <| px 600
            , alignTop
            ]
            [ column
                [ B.color colourTheme.cardBackground
                , htmlAttribute <| style "transition" "all .7s ease-in-out"
                , rounded 26
                ]
                [ titleMaker argument
                , column [ paddingEach { top = 10, right = 30, bottom = 10, left = 30 }, spacing 10 ]
                    [ propositionMaker argument
                    , reductioMaker argument
                    , summaryMaker argument
                    , strengthMaker argument
                    , tableMaker argument
                    , proofTreeMaker argument
                    ]
                ]
            ]
        ]


titleMaker : Argument -> Element msg
titleMaker argument =
    paragraph
        (paragraphBoldFormat
            ++ [ F.size 20
               , B.color colourTheme.highlightTextHover
               , paddingEach { top = 6, bottom = 3, left = 30, right = 30 }
               , alignBottom
               , E.width fill
               , D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
               ]
        )
        [ text argument.argumentTitle
        ]


propositionMaker : Argument -> Element msg
propositionMaker argument =
    row []
        [ column
            [ E.alignTop, E.alignLeft ]
            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
                [ el [ tooltip below (myTooltip "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.highlightText ] ]
            ]
        , column
            [ E.width fill, E.alignLeft ]
            [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
        ]


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

        reductio ->
            row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
                [ column
                    [ E.alignTop, E.alignLeft ]
                    [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
                        [ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ]
                        ]
                    ]
                , column [ E.width fill, E.alignLeft ]
                    [ paragraph (paragraphFormat ++ [ F.size 18, spacing 3 ])
                        [ text reductio ]
                    ]
                ]


summaryMaker : Argument -> Element msg
summaryMaker argument =
    row []
        [ column
            [ E.alignTop, E.alignLeft ]
            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
                [ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (text "Summary:") |> el [ F.color colourTheme.highlightText ]
                ]
            ]
        , column
            [ E.width fill, E.alignLeft ]
            [ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
        ]


strengthMaker : Argument -> Element msg
strengthMaker argument =
    let
        barMaker : Int -> Element msg
        barMaker num =
            el
                [ E.height <| px 12
                , E.width fill
                , D.rounded 10
                , D.color colourTheme.nonHighlightedDarkText
                , D.width 2
                , B.gradient
                    { angle = 90
                    , steps =
                        List.concat
                            [ List.repeat num colourTheme.barGreen
                            , List.repeat (10 - num) colourTheme.barRed
                            ]
                    }
                , tooltip below (myTooltip (getConfidenceTooltip num))
                ]
                none

        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."
    in
    row [ E.width fill ]
        [ column
            [ E.alignTop, E.alignLeft ]
            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
                [ el [ tooltip below (myTooltip "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ]
            ]
        , column
            [ E.width fill, E.alignLeft, centerY ]
            [ barMaker argument.argumentCertainty ]
        ]


tableMaker : Argument -> Element msg
tableMaker argument =
    let
        formalizationMaker : List (Element msg)
        formalizationMaker =
            let
                argumentFormatting : List (Attribute msg)
                argumentFormatting =
                    [ centerX, F.center, spacing 3 ]
            in
            List.indexedMap
                (\index argumentEntry ->
                    column (paragraphFormat ++ [ spacing 3, centerX, E.width <| px 500, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ])
                        (List.indexedMap
                            (\premiseIndex premiseWithNotation ->
                                column argumentFormatting
                                    [ paragraph paragraphHightlightedBoldText
                                        [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
                                        , text premiseWithNotation.premise
                                            |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
                                        ]
                                    , paragraph argumentFormatting
                                        [ text ("(" ++ premiseWithNotation.notation ++ ")")
                                            |> el [ F.color colourTheme.highlightText, F.bold ]
                                        ]
                                    ]
                            )
                            argumentEntry.premises
                            ++ [ column argumentFormatting
                                    [ paragraph paragraphHightlightedBoldText
                                        [ text "C)"
                                        , text argumentEntry.conclusion
                                            |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
                                        ]
                                    , paragraph argumentFormatting
                                        [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")")
                                            |> el [ F.color colourTheme.highlightText, F.bold ]
                                        ]
                                    ]
                               ]
                        )
                )
                argument.argumentFormalization
    in
    column [ centerX, E.width <| px 600 ]
        [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
            [ E.table
                [ spacing 0
                , D.rounded 10
                , D.width 2
                , D.color colourTheme.nonHighlightedDarkText
                , clip
                ]
                { data = argument.definitionTable
                , columns =
                    [ { header =
                            el
                                [ F.bold
                                , D.widthEach { bottom = 1, top = 1, left = 1, right = 1 }
                                , D.color colourTheme.nonHighlightedDarkText
                                , padding 8
                                ]
                                (text "Definiendum" |> el [ F.color colourTheme.highlightText ])
                      , width = fill |> maximum 50
                      , view =
                            \definition ->
                                row
                                    [ F.color colourTheme.highlightText
                                    , F.bold
                                    , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 }
                                    , D.color colourTheme.nonHighlightedDarkText
                                    , 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.nonHighlightedDarkText
                                , padding 8
                                ]
                                (text "Definiens" |> el [ F.color colourTheme.highlightText ])
                      , width = fill
                      , view =
                            \definition ->
                                paragraph
                                    [ F.color colourTheme.nonHighlightedText
                                    , F.regular
                                    , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 }
                                    , D.color colourTheme.nonHighlightedDarkText
                                    , padding 8
                                    , E.height fill
                                    ]
                                    [ row []
                                        [ paragraph [] [ text definition.definiens ]
                                        ]
                                    ]
                      }
                    ]
                }
            ]
        , column [ centerX ] formalizationMaker
        ]


proofTreeMaker : Argument -> Element msg
proofTreeMaker argument =
    row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ]
        [ column [ E.alignRight ]
            [ newTabLink
                (paragraphBoldFormat
                    ++ [ F.size 18
                       , F.color colourTheme.backgroundColour
                       , B.color colourTheme.highlightText
                       , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
                       , D.width 1
                       , D.rounded 10
                       , E.width <| px 105
                       , F.center
                       , E.alignRight
                       , transitionStyle
                       , mouseOver
                            [ B.color colourTheme.highlightTextHover
                            , F.color colourTheme.nonHighlightedText
                            , D.color colourTheme.highlightTextHover
                            ]
                       ]
                )
                { url = argument.proofLink
                , label = text "Proof Tree"
                }
            ]
        ]


basicDivider =
    el
        [ E.width fill
        , centerX
        , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
        , D.color (rgb255 200 200 200)
        , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
        ]
        none