website/frontend/src/Debate/Gibberish/Helpers.elm

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.Gibberish.Types 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 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
                                   ]
                            )
                            [ domainList gibberish ]
                        ]
                    ]
                ]
            ]
        ]


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


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


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


makeTerms : Terms -> Int -> Element msg
makeTerms 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 terms.term
                    ]
                , 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."
                                ]
                                (text "Intelligibility:")
                            ]
                        ]
                    , barPadding
                        [ barMaker getIntelligibilityTooltip terms.strength ]
                    ]
                , 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
                        )
                    ]
                ]
            ]
        ]


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."