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

import Browser
import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Cards.Inner.Helpers
    exposing
        ( detailBodyMaker
        , detailFormat
        , detailTitleMaker
        , listItem
        , listMaker
        )
import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Outer.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.ServiceFormat exposing (divider)
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.Helpers 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
    [ detailFormat row
        [ case ( device.class, device.orientation ) of
            ( Phone, Portrait ) ->
                none

            ( Tablet, Portrait ) ->
                none

            _ ->
                image "Fatty"
        , detailFormat column
            [ rateMaker service
            , descriptionMaker
            , offeringMaker service
            ]
        ]
    ]


rateMaker : Service msg -> Element msg
rateMaker service =
    detailFormat row
        [ detailTitleMaker TextLightOrange "Rate:"
        , el [ width fill ] <| detailBodyMaker TextLightGrey (text service.serviceRate)
        ]


descriptionMaker : Element msg
descriptionMaker =
    detailTitleMaker TextLightOrange "Offerings:"


offeringMaker : Service msg -> Element msg
offeringMaker service =
    listMaker makeDescription service.serviceDescription


makeDescription : Description -> Element msg
makeDescription description =
    listItem
        TextLightGrey
        description.point
