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
               ]
        )
        [ paragraph
            [ F.color colourTheme.textLightGrey
            , F.regular
            , F.size 18
            , F.bold
            , F.alignLeft
            ]
            [ column []
                [ row []
                    [ 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 ++ "\"")
                            ]
                        , 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
                                )
                            ]
                        ]
                    ]
                ]
            ]
        ]