website/frontend/src/Config/Pages/Interviews/Helpers.elm

module Config.Pages.Interviews.Helpers exposing (..)

import Config.Helpers.CardFormat exposing (..)
import Config.Helpers.Format
    exposing
        ( paragraphFontSize
        , paragraphSpacing
        )
import Config.Helpers.Converters exposing (formatSocial)
import Config.Helpers.StrengthBar
    exposing
        ( barMaker
        , barPadding
        )
import Config.Helpers.ToolTip exposing (tooltip)
import Config.Pages.Interviews.Types exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleFast
        , transitionStyleSlow
        )
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)


interviewMaker : Interview -> Element msg
interviewMaker interview =
    row
        topLevelBox
        [ desktopCardMaker desktopImageBoxSize desktopImageSize (interviewImage interview) (interviewSocial interview)
        , cardMaker
            [ cardTitleMaker (interviewTitle interview)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ socialMaker interview
                        , appearanceTitle interview
                        , appearanceMaker interview
                        ]
                    ]
                ]
            ]
        ]


interviewMakerMobile : Interview -> Element msg
interviewMakerMobile interview =
    row
        topLevelBox
        [ column [] []
        , cardMaker
            [ cardTitleMaker (interviewTitle interview)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ row [ spacing 10 ]
                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (interviewImage interview) (interviewSocial interview)
                            , socialMaker interview
                            ]
                        , appearanceTitle interview
                        , appearanceMaker interview
                        ]
                    ]
                ]
            ]
        ]


interviewImage : Interview -> { src : String, description : String }
interviewImage interview =
    { src = "interviews/" ++ interview.interviewImage ++ ".png"
    , description = interview.interviewImage
    }


interviewTitle : Interview -> String
interviewTitle interview =
    interview.interviewName


interviewSocial : Interview -> String
interviewSocial interview =
    interview.interviewSocial


socialMaker : Interview -> Element msg
socialMaker interview =
    paragraph
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        , F.size 18
        , spacing 5
        ]
        [ text "Social: "
        , newTabLink
            [ paragraphFontSize
            , F.color colourTheme.textLightOrange
            ]
            { url = interview.interviewSocial
            , label =
                el
                    [ transitionStyleSlow
                    , hoverFontDarkOrange
                    ]
                <|
                    text (formatSocial interview.interviewSocial)
            }
        ]


appearanceTitle : Interview -> Element msg
appearanceTitle interview =
    paragraph
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        , F.size 18
        ]
        [ text "Appearances: " ]


appearanceMaker : Interview -> Element msg
appearanceMaker interview =
    column [ spacing 15, width fill ] <|
        List.map2 (\x y -> makeAppearance x y)
            interview.interviewAppearances
            (List.range 1 (List.length interview.interviewAppearances))


makeAppearance : Appearance -> Int -> Element msg
makeAppearance appearanceEntry index =
    column
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , alignLeft
        , spacing 8
        , width fill
        ]
        [ row
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.size 18
                   , E.width fill
                   , paddingEach
                        { top = 0
                        , bottom = 0
                        , left = 35
                        , right = 0
                        }
                   ]
            )
            [ column
                [ F.color colourTheme.textLightGrey
                , paragraphSpacing
                , paragraphFontSize
                , F.size 18
                , alignTop
                , alignRight
                , F.alignRight
                ]
                [ text (String.fromInt index ++ ". ") ]
            , column
                [ spacing 8
                , width fill
                ]
                [ episodeMaker appearanceEntry
                , experienceMaker appearanceEntry
                , dateMaker appearanceEntry
                , subjectMaker appearanceEntry
                , subjectList appearanceEntry
                ]
            ]
        ]


episodeMaker : Appearance -> Element msg
episodeMaker appearanceEntry =
    newTabLink
        [ paragraphFontSize
        , F.color colourTheme.textLightOrange
        ]
        { url = appearanceEntry.appearanceLink
        , label =
            paragraph
                [ F.size 18
                ]
                [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
                    |> el
                        [ F.color colourTheme.textLightOrange
                        , hoverFontDarkOrange
                        ]
                ]
        }


experienceMaker : Appearance -> Element msg
experienceMaker appearanceEntry =
    row
        [ width fill
        , height fill
        ]
        [ column
            [ E.alignTop
            , E.alignLeft
            ]
            [ paragraph
                [ F.color colourTheme.textLightGrey
                , paragraphSpacing
                , paragraphFontSize
                , F.bold
                , F.size 18
                , E.width fill
                ]
                [ el
                    [ tooltip
                        "This represents how pleasant it was to interact with the host(s)."
                    ]
                    (el
                        [ paddingEach
                            { top = 0
                            , right = 10
                            , bottom = 0
                            , left = 0
                            }
                        ]
                     <|
                        text "Pleasantness:"
                    )
                ]
            ]
        , barPadding
            [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
        ]


getExperienceTooltip : Int -> String
getExperienceTooltip num =
    case num of
        0 ->
            "Nightmare. Complete fucking cunt."

        1 ->
            "Toxic. Deliberately malicious."

        2 ->
            "Hostile. Consistently disruptive."

        3 ->
            "Belligerent. Consistently disrespectful."

        4 ->
            "Uncivil. Frequently dismissive."

        5 ->
            "Neutral. Unremarkable social interaction."

        6 ->
            "Civil. Slightly considerate."

        7 ->
            "Pleasant. Genuinely respectful."

        8 ->
            "Very kind. Consistently supportive."

        9 ->
            "Compassionate. Went out of their way."

        10 ->
            "Absolute angel. Perfectly empathetic."

        _ ->
            "Behavior level out of expected range."


dateMaker : Appearance -> Element msg
dateMaker appearanceEntry =
    row
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        ]
        [ column
            [ alignTop
            ]
            [ text "Published:"
            ]
        , column
            [ alignTop
            , width fill
            ]
            [ paragraph
                [ F.regular
                , paddingEach
                    { top = 0
                    , right = 0
                    , bottom = 0
                    , left = 3
                    }
                ]
                [ text appearanceEntry.appearanceYear ]
            ]
        ]


subjectMaker : Appearance -> Element msg
subjectMaker appearanceEntry =
    paragraph
        [ F.color colourTheme.textLightGrey
        , paragraphSpacing
        , paragraphFontSize
        , F.bold
        ]
        [ column
            [ alignTop
            ]
            [ text "Subjects: "
            ]
        ]


subjectList : Appearance -> Element msg
subjectList appearanceEntry =
    paragraph
        [ spacing 8
        , width fill
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = 25
            }
        ]
    <|
        List.map2 (\x y -> makeSubject x)
            appearanceEntry.appearanceSubjects
            (List.range 1 (List.length appearanceEntry.appearanceSubjects))


makeSubject : Subjects -> Element msg
makeSubject subjects =
    paragraph
        [ E.width fill
        , alignLeft
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = 8
            }
        ]
        [ paragraph [ F.regular ]
            [ text ("‣ " ++ subjects.subject) ]
        ]