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

import Config.Helpers.Articles.Article exposing (contentList)
import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Outer.Types as C
import Config.Helpers.Format exposing (..)
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Types exposing (Header)
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.ServiceFormat exposing (..)
import Config.Helpers.ToolTip exposing (..)
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Pages.Blog.Types exposing (BlogArticle)
import Config.Pages.Services.Records.ElmBuilds exposing (servicesElmBuilds)
import Config.Style.Colour.Helpers exposing (..)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleFast
        , transitionStyleSlow
        )
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 Html
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Route.Path as Path
import Shared
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 = "services (elmBuilds)"
    , attributes = []
    , element = elmBuildsContainer shared.device
    }


elmBuildsContainer : Device -> Element msg
elmBuildsContainer device =
    topLevelContainer (elmBuildsList device)


elmBuildsList : Device -> Element msg
elmBuildsList device =
    column
        (case ( device.class, device.orientation ) of
            _ ->
                pageList device
        )
    <|
        List.concat
            [ List.map
                (\service ->
                    cardMaker device
                        (C.BlogArticle service)
                        (contentList service
                            [ elmCodeRenderer device ]
                        )
                )
                [ elmBuilds ]
            ]


elmBuilds : BlogArticle
elmBuilds =
    { articleName = String.toUpper "Elm Builds"
    , articleLink = ""
    , articleAuthor = ""
    , isNewTabLink = False
    , hasReferences = False
    , hasTableOfContents = False
    , articleImage = ""
    , articlePublished = ""
    , articleBody = """
The site that you're currently viewing this on was written by me in the Elm programming language. In the process of programming this website, I realized that I could create reasonably high quality work with Elm, so I'm offering it as a service at a fee that reflects my skill level.
If you're in the market for a new frontend for your website, please inquire at [nick@upRootNutrition.com](mailto:).

Below is an example of a helper function that I wrote for this site. This particular function extracts the first 80 words from all of my articles' markdown strings, and displays them as blurbs, followed by an ellipsis, in my article cards using my markdown parser.

The source code for this website is viewable on [Gitlab](https://gitlab.com/upRootNutrition/website).

# WHAT YOU GET

1. An Elm-based website written to your specifications.

2. Two revisions to better meet your needs and vision.

3. Six months of free support to correct mistakes.

# REQUIREMENTS

• A clear vision of what you want your site to look like.

• A clear description of your site's pages and structure.

• Any bespoke frontend functionality you want included.

# EXAMPLE

"""
    , articleReferences =
        [ { author = ""
          , title = ""
          , journal = ""
          , year = ""
          , link = ""
          }
        ]
    }


elmCodeRenderer : Device -> Element msg
elmCodeRenderer device =
    el
        [ paddingEach
            { top = 15
            , bottom = 15
            , left = 20
            , right = 20
            }
        , case ( device.class, device.orientation ) of
            ( Phone, Portrait ) ->
                B.color colourTheme.backgroundDarkGrey

            ( Tablet, Portrait ) ->
                B.color colourTheme.backgroundDarkGrey

            _ ->
                B.color colourTheme.backgroundLightGrey
        , D.rounded 10
        , width fill
        , spacing 8
        ]
    <|
        column
            [ F.size 14
            , spacing 5
            , width fill
            ]
            [ renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 0 0 ]
                , text "extractFirstWords"
                    |> el [ F.color syntaxTheme.key ]
                , text " : "
                    |> el [ F.color syntaxTheme.operator ]
                , text "String"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " -> "
                    |> el [ F.color syntaxTheme.operator ]
                , text "String"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 0 0 ]
                , text "extractFirstWords"
                    |> el [ F.color syntaxTheme.key ]
                , text " text"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "let"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "words"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "text"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 64 0 ]
                , text "|>"
                    |> el [ F.color syntaxTheme.operator ]
                , text " String"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "split"
                , text " "
                    |> el [ F.color syntaxTheme.string ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                , text " "
                    |> el [ F.color syntaxTheme.string ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 64 0 ]
                , text "|>"
                    |> el [ F.color syntaxTheme.operator ]
                , text " List"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "filter"
                , text " ("
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "not"
                , text " << "
                    |> el [ F.color syntaxTheme.operator ]
                , text "String"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "isEmpty"
                , text ")"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "truncatedWords"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "List"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "take"
                , text " 80"
                    |> el [ F.color syntaxTheme.string ]
                , text " words"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "wasTextTruncated"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "List"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "length"
                , text " words"
                , text " > "
                    |> el [ F.color syntaxTheme.operator ]
                , text "80"
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "result"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "String"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "join"
                , text " "
                    |> el [ F.color syntaxTheme.string ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                , text " "
                    |> el [ F.color syntaxTheme.string ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                , text " truncatedWords"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "in"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "if"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " wasTextTruncated"
                , text " then"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "result"
                , text " ++ "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                , text "..."
                    |> el [ F.color syntaxTheme.string ]
                , text "\""
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "else"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "result"
                ]
            ]
