website/frontend/src/Interviews/Helpers.elm

module Interviews.Helpers exposing (..)

import Config.Colour exposing (..)
import Config.Format exposing (..)
import Cuckery.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Interviews.Types exposing (..)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)


makeSubject : Subjects -> Element msg
makeSubject subjects =
    column [ E.width fill, alignLeft ]
        [ paragraph [ F.regular ]
            [ text ("‣ " ++ subjects.subject) ]
        ]


makeAppearance : Appearance -> Int -> Element msg
makeAppearance appearanceEntry index =
    column
        (paragraphAlignLeft
            ++ [ spacing 3
               , width fill
               ]
        )
        [ row
            (paragraphFormat
                ++ [ F.size 18
                   , paddingEach
                        { top = 0
                        , bottom = 0
                        , left = 15
                        , right = 15
                        }
                   , E.width fill
                   ]
            )
            [ text "    "
            , text (String.fromInt index ++ ". ")
            , paragraphLinkFormat
                { url = appearanceEntry.appearanceLink
                , label =
                    row
                        [ F.size 18
                        ]
                        [ text ("#"++appearanceEntry.appearanceEpisode++": "++appearanceEntry.appearanceTitle)
                            |> el
                                [ F.color colourTheme.highlightText
                                , mouseOver [ F.color colourTheme.highlightTextHover ]
                                , transitionStyle
                                ]
                        ]
                }
            ]
        , row paragraphBoldFormat
            [ column [ alignTop, width <| px 125 ]
                [ text "Subjects:"
                    |> el
                        [ paddingEach
                            { top = 0
                            , right = 0
                            , bottom = 0
                            , left = 55
                            }
                        ]
                ]
            , column
                [ spacing 8
                , width fill
                ]
              <|
                List.map2 (\x y -> makeSubject x)
                    appearanceEntry.appearanceSubjects
                    (List.range 1 (List.length appearanceEntry.appearanceSubjects))
            ]
        ]


interviewMaker : Interview -> Element msg
interviewMaker interview =
    row
        [ spacing 20
        , width fill
        , E.height fill
        , alignTop
        , alignRight
        ]
        [ column
            [ E.width <| px 115
            , E.height <| px 115
            , alignTop
            , alignRight
            ]
            [ column
                [ D.rounded 100
                , D.width 5
                , D.color colourTheme.cardBackground
                ]
                [ E.image
                    [ alignRight
                    , alignTop
                    , D.rounded 100
                    , clip
                    , E.width <| px 90
                    , E.height <| px 90
                    ]
                    { src = "interviews/" ++ interview.interviewImage ++ ".png"
                    , description = interview.interviewImage
                    }
                ]
            ]
        , column
            [ E.width <| px 600 ]
            [ row
                (nonHighlightedTitleFormat
                    ++ [ F.size 20
                       , paddingEach
                            { top = 6
                            , bottom = 3
                            , left = 25
                            , right = 15
                            }
                       , alignBottom
                       , width fill
                       , D.roundEach
                            { topLeft = 26
                            , topRight = 15
                            , bottomRight = 0
                            , bottomLeft = 0
                            }
                       , B.gradient
                            { angle = 1.5708
                            , steps =
                                [ colourTheme.highlightTextHover
                                , colourTheme.highlightTextHover
                                , colourTheme.transparent
                                , colourTheme.transparent
                                ]
                            }
                       ]
                )
                [ text interview.interviewName ]
            , column
                [ E.height fill
                , E.width fill

                -- , B.color colourTheme.cardBackground
                , paddingEach
                    { top = 10
                    , bottom = 10
                    , left = 10
                    , right = 10
                    }
                , D.roundEach
                    { topLeft = 0
                    , topRight = 0
                    , bottomRight = 0
                    , bottomLeft = 26
                    }
                , spacing 3
                , B.gradient
                    { angle = 1.5708
                    , steps =
                        [ colourTheme.cardBackground
                        , colourTheme.cardBackground
                        , colourTheme.transparent
                        , colourTheme.transparent
                        ]
                    }
                ]
                [ row
                    (paragraphBoldFormat
                        ++ [ F.size 18
                           , paddingEach
                                { top = 0
                                , bottom = 0
                                , left = 15
                                , right = 15
                                }
                           , spacing 5
                           ]
                    )
                    [ text "Social:"
                    , paragraphLinkFormat
                        { url = interview.interviewSocial
                        , label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
                        }
                    ]
                , row
                    (paragraphBoldFormat
                        ++ [ F.size 18
                           , paddingEach
                                { top = 0
                                , bottom = 0
                                , left = 15
                                , right = 15
                                }
                           ]
                    )
                    [ text "Appearances:" ]
                , column [ spacing 8, width fill ] <|
                    List.map2 (\x y -> makeAppearance x y)
                        interview.interviewAppearances
                        (List.range 1 (List.length interview.interviewAppearances))
                ]
            ]
        ]