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
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 =
    let
        argRows : List (Element msg)
        argRows =
            let
                argumentFormatting : List (Attribute msg)
                argumentFormatting =
                    [ centerX, F.center, spacing 3 ]
            in
            List.indexedMap
                (\index argumentEntry ->
                    column (paragraphFormat ++ [ spacing 3, paddingEach { top = 30, 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

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

                reductio ->
                    row []
                        [ 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 []
                                [ text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
                                ]
                            ]
                        ]
    in
    column
        [ paragraphWidth, E.alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 60, left = 0 } ]
        [ paragraph (paragraphBoldFormat ++ [ F.size 20 ])
            [ newTabLink []
                { url = argument.proofLink
                , label = transitionNonHighlightedLinkHover <| text argument.argumentTitle
                }

            --create expandable text for this in the future
            ]
        , 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 ] ] ]
            ]
        , maybeReductioField
        , row [ E.alignTop ]
            [ 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 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
            ]
        , wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
            [ E.table
                [ spacing 0
                , D.rounded 10
                , D.width 1
                , 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 ] argRows
        ]