website/frontend/src/Debate/Helpers.elm

module Debate.Helpers exposing (..)

-- import Html exposing (div, hr)
-- import Html.Attributes as H exposing (style, title, wrap)
-- import Config.Types 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.Attributes exposing (form, id, style)
import Layouts
import List.Extra exposing (..)
import Maybe exposing (withDefault)
import Maybe.Extra exposing (isNothing)
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)


type alias ArgMakerInput msg =
    { arg : Argument
    , index : Int
    , isExpanded : Bool
    , maybeHeight : Maybe Int
    , titleClickMsg : msg
    }


argumentMaker : ArgMakerInput msg -> Element msg
argumentMaker argMakerInput =
    -- row [ imageSpacer, E.alignLeft ]
    --     [ E.image
    --         (case argMakerInput.maybeHeight of
    --             Nothing ->
    --                 [ transparent True ]
    --             Just _ ->
    --                 [ centerX
    --                 , centerY
    --                 , alignTop
    --                 , D.rounded 100
    --                 , E.width <| px 52
    --                 ]
    --         )
    --         { src = "arguments/" ++ argMakerInput.arg.argumentImage ++ ".png"
    --         , description = ""
    --         }
    --     ,
    column
        (if isNothing argMakerInput.maybeHeight then
            [ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index)
            , E.width <| px 600
            ]

         else
            [ E.width <| px 600, alignTop ]
        )
        [ titleMaker argMakerInput
        , column
            (case argMakerInput.maybeHeight of
                Just h ->
                    [ B.color colourTheme.cardBackground
                    , clip
                    , htmlAttribute <| style "transition" "all .7s ease-in-out"
                    , roundEach { topLeft = 0, topRight = 0, bottomRight = 20, bottomLeft = 20 }
                    , height <|
                        px <|
                            if argMakerInput.isExpanded then
                                h

                            else
                                0
                    ]

                Nothing ->
                    [ transparent True ]
            )
          <|
            List.map (\x -> x argMakerInput)
                [ propositionMaker
                , reductioMaker
                , summaryMaker
                , strengthMaker
                , tableMaker
                , proofTreeMaker
                ]
        ]



-- ]


titleMaker : ArgMakerInput msg -> Element msg
titleMaker argMakerInput =
    paragraph
        (paragraphBoldFormat
            ++ [ F.size 20
               , F.color colourTheme.backgroundColour
               , B.color colourTheme.highlightText
               , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
               , alignBottom
               , roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }
               , F.center
               , pointer
               , htmlAttribute <| style "transition" "all 0.3s ease-in-out"
               , mouseOver
                    [ B.color colourTheme.highlightTextHover
                    , F.color colourTheme.nonHighlightedText
                    ]
               , V.onClick <| argMakerInput.titleClickMsg
               ]
            ++ (case argMakerInput.maybeHeight of
                    Nothing ->
                        [ transparent True ]

                    Just _ ->
                        [ roundEach <|
                            if argMakerInput.isExpanded then
                                { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }

                            else
                                { topLeft = 10, topRight = 10, bottomRight = 10, bottomLeft = 10 }
                        , F.alignLeft
                        ]
               )
        )
        [ text argMakerInput.arg.argumentTitle ]


propositionMaker : ArgMakerInput msg -> Element msg
propositionMaker argMakerInput =
    row
        [ paddingEach { top = 20, right = 30, bottom = 0, left = 30 }
        , E.width fill
        ]
        [ 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 argMakerInput.arg.propositionTitle
                    |> el
                        [ F.color colourTheme.nonHighlightedText
                        , F.regular
                        , F.size 16
                        ]
                ]
            ]
        ]


reductioMaker : ArgMakerInput msg -> Element msg
reductioMaker argMakerInput =
    case argMakerInput.arg.propositionReductio of
        "" ->
            none

        reductio ->
            row [ paddingEach { top = 8, right = 30, bottom = 0, left = 30 }, E.width fill ]
                [ 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 (paragraphBoldFormat ++ [ F.size 18, spacing 3 ])
                        [ text reductio ]
                    ]
                ]


summaryMaker : ArgMakerInput msg -> Element msg
summaryMaker argMakerInput =
    row [ paddingEach { top = 10, right = 30, bottom = 0, left = 30 } ]
        [ 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 argMakerInput.arg.propositionSummary
                    |> el
                        [ F.color colourTheme.nonHighlightedText
                        , F.regular
                        , F.size 16
                        ]
                ]
            ]
        ]


strengthMaker : ArgMakerInput msg -> Element msg
strengthMaker argMakerInput =
    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 [ paddingEach { top = 10, right = 30, bottom = 0, left = 30 }, 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 argMakerInput.arg.argumentCertainty ]
        ]


tableMaker : ArgMakerInput msg -> Element msg
tableMaker argMakerInput =
    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 fill, paddingEach { top = 10, right = 30, bottom = 0, left = 30 } ])
                        (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 ]
                                        ]
                                    ]
                               ]
                        )
                )
                argMakerInput.arg.argumentFormalization
    in
    column
        [ centerX
        , paddingEach { top = 8, right = 30, bottom = 0, left = 30 }
        , E.width fill
        ]
        [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
            [ E.table
                [ spacing 0
                , D.rounded 10
                , D.width 2
                , D.color colourTheme.nonHighlightedDarkText
                , clip
                ]
                { data = argMakerInput.arg.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 : ArgMakerInput msg -> Element msg
proofTreeMaker argMakerInput =
    row
        [ paddingEach { top = 8, right = 30, bottom = 0, left = 30 }
        , centerX
        , E.width fill
        ]
        [ column [ E.width fill ]
            [ newTabLink
                (paragraphBoldFormat
                    ++ [ F.size 18
                       , F.color colourTheme.backgroundColour
                       , B.color colourTheme.highlightText
                       , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
                       , D.rounded 10
                       , F.center
                       , E.alignRight
                       , alignBottom
                       , transitionStyle
                       , mouseOver
                            [ B.color colourTheme.highlightTextHover
                            , F.color colourTheme.nonHighlightedText
                            , D.color colourTheme.highlightTextHover
                            ]
                       ]
                )
                { url = argMakerInput.arg.proofLink
                , label = text "Proof Tree"
                }
            ]
        ]