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, spacing 10 ] ++ (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, 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 -> 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" } ] ]