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



-- argumentMaker : List Bool -> Argument -> Int -> Element msg


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
        ]
        -- [ explain Debug.todo ]
        [ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded
        , paragraphMaker argument isArgumentExpanded
        ]


titleMaker : (Int -> msg) -> Int -> String -> Bool -> Element msg
titleMaker onClickMsg indexExpand title isArgExpanded =
    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

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

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


paragraphMaker : Argument -> Bool -> Element msg
paragraphMaker argument isArgumentExpanded =
    paragraph
        (if isArgumentExpanded then
            [ height <| px 0
            , transitionStyle
            , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }

            -- , B.color colourTheme.debugColour
            ]
            -- []

         else
            [ height <| px 100
            , transitionStyle

            -- , B.color colourTheme.debugColour
            ]
        )
        [ text argument.propositionSummary
            |> el
                [ F.color colourTheme.nonHighlightedText
                , F.regular
                , F.size 16
                ]
        ]



-- argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg
-- argumentMaker onClickMsg areArgsExpanded argument indexExpand =
--     let
--         maybeIsExpanded : Maybe Bool
--         maybeIsExpanded =
--             getAt indexExpand areArgsExpanded
--         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
--         , explain Debug.todo
--         ]
--         [ 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
--                         ]
--                    , V.onClick <| onClickMsg indexExpand
--                    ]
--             )
--             [ text argument.argumentTitle
--             ]
--         , paragraph
--             (case maybeIsExpanded of
--                 Just True ->
--                     [ F.size 0, transitionStyle ]
--                 _ ->
--                     [ transitionStyle, F.size 50 ]
--             )
--             [ 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
--                        ]
--                 )
--             ]
--         ]