website/frontend/src/Pages/Services.elm

module Pages.Services exposing (Model, Msg, page)

import Browser
import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Cards.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Types as C
import Config.Helpers.Format
    exposing
        ( headerFontSizeMedium
        , headerFontSizeSmall
        , paragraphFontSize
        , paragraphSpacing
        )
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (servicesHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Pages.Services.Records.DebateAnalysis exposing (..)
import Config.Pages.Services.Records.DebateCoaching exposing (..)
import Config.Pages.Services.Records.ElmBuilds exposing (..)
import Config.Pages.Services.Records.NixBuilds exposing (..)
import Config.Pages.Services.Records.NutritionScience exposing (..)
import Config.Pages.Services.Types exposing (..)
import Config.Style.Colour as T exposing (..)
import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
import Config.Style.Images exposing (imageSquareMaker)
import Config.Style.Transitions exposing (transitionStyleMedium)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import View exposing (View)


page : Shared.Model -> Route () -> Page Model Msg
page shared route =
    Page.new
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view shared
        }
        |> Page.withLayout toLayout


toLayout : Model -> Layouts.Layout Msg
toLayout model =
    Layouts.Navbar {}



-- INIT


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init () =
    ( {}
    , Effect.map
        (\_ -> NoOp)
        (Effect.sendCmd resetViewport)
    )



-- UPDATE


type Msg
    = NoOp


update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Effect.none
            )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Shared.Model -> Model -> View Msg
view shared model =
    { title = pageNames.pageServices
    , attributes = []
    , element = servicesContainer shared.device
    }


servicesContainer : Device -> Element msg
servicesContainer device =
    topLevelContainer (servicesList device)


servicesList : Device -> Element msg
servicesList device =
    column
        (case ( device.class, device.orientation ) of
            _ ->
                pageList device
        )
    <|
        List.concat
            [ [ headerMaker (R.Services servicesHeader)
              ]
            , List.map
                (\service ->
                    cardMaker device (C.Service service) (contentList device service)
                )
                [ servicesDebateAnalysis
                , servicesDebateCoaching
                , servicesNutritionScience
                , servicesNixBuilds
                , servicesElmBuilds
                ]
            ]


contentList : Device -> Service msg -> List (Element msg)
contentList device service =
    let
        image : String -> Element msg
        image size =
            el
                [ alignLeft
                , paddingEach
                    { top = 0
                    , right = 10
                    , bottom = 0
                    , left = 0
                    }
                ]
            <|
                imageSquareMaker device (imagePathMaker M.ServicePage service.serviceImage) True size
    in
    [ row []
        [ image "Small"
        , column [ alignBottom ]
            [ rateMaker service
            , descriptionMaker service
            ]
        ]
    , offeringMaker service
    ]


serviceWidth =
    width <| px 45


rateMaker : Service msg -> Element msg
rateMaker service =
    row
        [ F.color colourTheme.textLightOrange
        , paragraphSpacing
        , F.bold
        , headerFontSizeSmall
        , E.width fill
        ]
        [ column
            [ alignTop
            , serviceWidth
            ]
            [ E.text "Rate:"
            ]
        , column
            [ E.width fill
            , alignLeft
            ]
            [ el
                [ F.regular
                , paragraphFontSize
                , F.color colourTheme.textLightGrey
                ]
              <|
                E.text service.serviceRate
            ]
        ]


descriptionMaker : Service msg -> Element msg
descriptionMaker service =
    row
        [ F.color colourTheme.textLightOrange
        , paragraphSpacing
        , headerFontSizeSmall
        , F.bold
        ]
        [ column
            [ alignTop
            , width <| px 80
            ]
            [ E.text "Offerings:"
            ]
        ]


offeringMaker : Service msg -> Element msg
offeringMaker service =
    column
        [ spacing 8
        , width fill
        ]
    <|
        List.map2 (\x y -> makeDescription x)
            service.serviceDescription
            (List.range 1 (List.length service.serviceDescription))


makeDescription : Description -> Element msg
makeDescription description =
    column
        ([ F.color colourTheme.textLightGrey
         , paragraphSpacing
         , paragraphFontSize
         , F.bold
         , alignLeft
         ]
            ++ [ spacing 8
               , width fill
               ]
        )
        [ paragraph [ F.regular ]
            [ E.text ("• " ++ description.point) ]
        ]