module Debate.Helpers%20copy exposing (..)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 =
    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 = 0, right = 0, bottom = 0, left = 0 }, E.width <| px 550, centerX ])
                        (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 = 0, left = 0 } ]
        [ 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
                   , D.rounded 20
                   , alignBottom
                   , F.center
                   , transitionStyle
                   , mouseOver
                        [ B.color colourTheme.highlightTextHover
                        , F.color colourTheme.nonHighlightedText
                        , D.color colourTheme.highlightTextHover
                        ]
                   ]
            )
            [ text argument.argumentTitle

            --create expandable text for this in the future
            ]
        , 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 ] ] ]
            ]
        , 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, 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 ]
            (argRows
                ++ [ column [ paragraphWidth, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
                        [ row [ 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 20
                                           , 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
                   ]
            )
        ]


basicDivider : Element msg
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