module Debate.Gibberish.Helpers exposing (..)

import Config.CardFormat exposing (..)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity exposing (..)
import Config.StrengthBar exposing (..)
import Config.ToolTip exposing (..)
import Debate.Arguments.Types exposing (..)
import Debate.Gibberish.Domains.Epistemology
import Debate.Gibberish.Domains.Metaphysics
import Debate.Gibberish.Domains.Normativity
import Debate.Gibberish.Domains.Ontology
import Debate.Gibberish.Domains.PhilOfLanguage
import Debate.Gibberish.Domains.PhilOfMind
import Debate.Gibberish.Domains.Theology
import Debate.Gibberish.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 Json.Decode exposing (field)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)


gibberishMaker : Gibberish -> Element msg
gibberishMaker gibberish =
    row
        topLevelBox
        [ cardImageMaker (gibberishImage gibberish) ""
        , cardMaker
            [ cardTitleMaker (gibberishTitle gibberish)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ paragraph
                            (paragraphFormat
                                ++ [ F.size 18
                                   , F.center
                                   ]
                            )
                            [ desktopDomainList gibberish ]
                        ]
                    ]
                ]
            ]
        ]


gibberishMakerMobile : Gibberish -> Element msg
gibberishMakerMobile gibberish =
    row
        topLevelBox
        [ cardMaker
            [ cardTitleMaker (gibberishTitle gibberish)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ paragraph
                            (paragraphFormat
                                ++ [ F.size 18
                                   , F.center
                                   ]
                            )
                            [ cardImageMakerMobile (gibberishImage gibberish) ""
                            , mobileDomainList gibberish
                            ]
                        ]
                    ]
                ]
            ]
        ]



gibberishImage : Gibberish -> { src : String, description : String }
gibberishImage gibberish =
    { src = "gibberish/" ++ gibberish.gibberishImage ++ ".png"
    , description = gibberish.gibberishTitle
    }


gibberishTitle : Gibberish -> String
gibberishTitle gibberish =
    gibberish.gibberishTitle


desktopDomainList : Gibberish -> Element msg
desktopDomainList gibberish =
    column
        [ spacing 8
        , E.width fill
        ]
    <|
        List.map2 (\x y -> desktopMakeTerms x y)
            gibberish.gibberishTerms
            (List.range 1 (List.length gibberish.gibberishTerms))


mobileDomainList : Gibberish -> Element msg
mobileDomainList gibberish =
    column
        [ spacing 8
        , E.width fill
        ]
    <|
        List.map2 (\x y -> mobileMakeTerms x y)
            gibberish.gibberishTerms
            (List.range 1 (List.length gibberish.gibberishTerms))


desktopMakeTerms : Terms -> Int -> Element msg
desktopMakeTerms terms index =
    column
        (paragraphAlignLeft
            ++ [ spacing 8
               , E.width fill
               ]
        )
        [ row
            [ F.color colourTheme.textLightGrey
            , F.regular
            , F.size 18
            , F.bold
            , F.alignLeft
            , E.width fill
            ]
            [ column
                [ E.alignRight
                , alignTop
                ]
                [ paragraph
                    []
                    [ text <| String.fromInt index ++ ". " ]
                ]
            , column
                [ E.width fill
                , paddingEach
                    { top = 0
                    , bottom = 0
                    , left = 10
                    , right = 10
                    }
                ]
                [ paragraph
                    []
                    [ el [ F.color colourTheme.textLightOrange ] <|
                        text <|
                            String.toLower
                                ("\""
                                    ++ terms.term
                                    ++ "\""
                                )
                    ]
                , desktopBar terms
                , paragraph
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , F.size 16
                    , F.alignLeft
                    ]
                    [ text
                        (case terms.explanation of
                            NoClue ->
                                "I have no fucking clue what this means."

                            SpecificExplanation str ->
                                str
                        )
                    ]
                ]
            ]
        ]


mobileMakeTerms : Terms -> Int -> Element msg
mobileMakeTerms terms index =
    column
        (paragraphAlignLeft
            ++ [ spacing 8
               , E.width fill
               ]
        )
        [ row
            [ F.color colourTheme.textLightGrey
            , F.regular
            , F.size 18
            , F.bold
            , F.alignLeft
            , E.width fill
            ]
            [ column
                [ E.alignRight
                , alignTop
                ]
                [ paragraph
                    []
                    [ text (String.fromInt index ++ ". ") ]
                ]
            , column
                [ E.width fill
                , paddingEach
                    { top = 0
                    , bottom = 0
                    , left = 10
                    , right = 10
                    }
                ]
                [ paragraph
                    []
                    [ el [ F.color colourTheme.textLightOrange ] <|
                        text <|
                            String.toLower "\""
                                ++ terms.term
                                ++ "\""
                    ]
                , mobileBar terms
                , paragraph
                    [ F.color colourTheme.textLightGrey
                    , F.regular
                    , F.size 16
                    , F.alignLeft
                    ]
                    [ text
                        (case terms.explanation of
                            NoClue ->
                                "I have no fucking clue what this means."

                            SpecificExplanation str ->
                                str
                        )
                    ]
                ]
            ]
        ]


desktopBar : Terms -> Element msg
desktopBar terms =
    row
        [ E.width fill
        , height fill
        ]
        [ column
            [ E.alignTop
            , E.alignLeft
            ]
            [ paragraph
                (paragraphBoldFormat
                    ++ [ F.size 18
                       , E.alignLeft
                       , E.width fill
                       ]
                )
                [ el
                    [ tooltip
                        "This represents my confidence that the term can be understood from at least one viewpoint."
                    ]
                    (el
                        [ paddingEach
                            { top = 0
                            , right = 10
                            , bottom = 0
                            , left = 0
                            }
                        ]
                     <|
                        text "Intelligibility:"
                    )
                ]
            ]
        , barPadding
            [ barMaker getIntelligibilityTooltip terms.strength ]
        ]


mobileBar : Terms -> Element msg
mobileBar terms =
    column
        [ E.width fill
        , height fill
        ]
        [ column
            [ E.alignTop
            , E.alignLeft
            ]
            [ paragraph
                (paragraphBoldFormat
                    ++ [ F.size 18
                       , E.alignLeft
                       , E.width fill
                       ]
                )
                [ el
                    [ tooltip
                        "This represents my confidence that the term can be understood from at least one viewpoint."
                    ]
                    (text "Intelligibility:")
                ]
            ]
        , barPadding
            [ barMaker getIntelligibilityTooltip terms.strength ]
        ]


getIntelligibilityTooltip : Int -> String
getIntelligibilityTooltip num =
    case num of
        0 ->
            "Total fucking gibberish."

        1 ->
            "Extremely unclear, speaking in tongues."

        2 ->
            "Mostly unclear, hard to make any sense of."

        3 ->
            "Somewhat unclear, difficult to understand."

        4 ->
            "Slightly unclear, understandable with effort."

        5 ->
            "Neutral, not sure what to make of it."

        6 ->
            "Slightly clear, with unanswered questions."

        7 ->
            "Somewhat clear, kinda get the idea."

        8 ->
            "Very clear, usefulness questionable."

        9 ->
            "Extremely clear, usefulness dubious."

        10 ->
            "Perfectly clear, but also useless."

        _ ->
            "Intelligibility rating is out of bounds."


gibberishListNumber : Int
gibberishListNumber =
    List.length Debate.Gibberish.Domains.Epistemology.epistemologyGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.Metaphysics.metaphysicsGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.Normativity.normativityGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.Ontology.ontologyGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.PhilOfLanguage.philOfLanguageGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.PhilOfMind.philOfMindGibberish.gibberishTerms
        + List.length Debate.Gibberish.Domains.Theology.theologyGibberish.gibberishTerms
