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)
import Layouts
import List.Extra exposing (..)
import Maybe exposing (withDefault)
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)



-- (if isArgumentExpanded then
--             [ height <| px 0
--             , transitionStyle
--             , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
--             ]
--          else
--             [
--             ]
--         )


argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg
argumentMaker onClickMsg areArgsExpanded argument indexExpand =
    let
        isArgumentExpanded : Bool
        isArgumentExpanded =
            withDefault False <| getAt indexExpand areArgsExpanded
    in
    column
        [ B.color colourTheme.darker
        , rounded 10
        , E.width <| px 700
        ]
        [ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded
        , column
            ([ E.width <| px 600, centerX, transitionStyle ]
                ++ (if not isArgumentExpanded then
                        [ transitionStyle
                        , height <| px 0
                        , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
                        , clip
                        ]

                    else
                        [ transitionStyle
                        , height <| px 800
                        , clip
                        ]
                   )
            )
            [ propositionMaker argument isArgumentExpanded
            , reductioMaker argument isArgumentExpanded
            , summaryMaker argument isArgumentExpanded
            , tableMaker argument isArgumentExpanded
            , proofTreeMaker argument isArgumentExpanded
            ]
        ]


titleMaker : (Int -> msg) -> Int -> String -> Bool -> Element msg
titleMaker onClickMsg indexExpand title isArgumentExpanded =
    paragraph
        (paragraphBoldFormat
            ++ [ F.size 20
               , F.color colourTheme.backgroundColour
               , B.color colourTheme.highlightText
               , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
               , D.width 1
               , roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }
               , alignBottom
               , F.center
               , transitionStyle
               , pointer

               --    , mouseOver
               --         [ B.color colourTheme.highlightTextHover
               --         , F.color colourTheme.nonHighlightedText
               --         , D.color colourTheme.highlightTextHover
               --         ]
               , V.onClick <| onClickMsg indexExpand
               ]
            ++ (if not isArgumentExpanded then
                    [ rounded 10 ]

                else
                    [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ]
               )
        )
        [ text title
        ]


propositionMaker : Argument -> Bool -> Element msg
propositionMaker argument isArgumentExpanded =
    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 "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 -> Bool -> Element msg
reductioMaker argument isArgumentExpanded =
    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 (paragraphBoldFormat ++ [ F.size 18, spacing 3 ])
                        [ text reductio ]
                    ]
                ]


summaryMaker : Argument -> Bool -> Element msg
summaryMaker argument isArgumentExpanded =
    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 ] ] ]
        ]


tableMaker : Argument -> Bool -> Element msg
tableMaker argument isArgumentExpanded =
    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 ])
                        (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, paddingEach { top = 10, right = 0, bottom = 10, left = 0 } ])
            [ 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 -> Bool -> Element msg
proofTreeMaker argument isArgumentExpanded =
    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"
                }
            ]
        ]