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

import Blog.Helpers exposing (..)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Viewport exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import View exposing (View)
import Config.Response exposing (..)

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


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



-- 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 : Model -> View Msg
view model =
    { title = ""
    , attributes = []
    , element = homeContainer
    }


homeContainer : Element msg
homeContainer =
    topLevelContainer homeList


homeList : Element msg
homeList =
    column pageListDesktop
        [ column
            [ centerX
            , centerY
            , spacing 20
            ]
            [ row [ centerX ]
                [ E.image [ E.width <| px 785 ]
                    { src = "assets/logo_extended.png"
                    , description = ""
                    }
                ]
            , column
                [ paddingEach
                    { top = 15
                    , bottom = 15
                    , left = 20
                    , right = 20
                    }
                , B.color colourTheme.backgroundDarkGrey
                , rounded 10
                , E.width fill
                , spacing 8
                ]
                [ paragraph (paragraphFormat ++ [ centerX ]) [ text "upRootNutrition is an open source project, created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media." ]
                ]
            ]
        ]