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

import Config.Data.Identity exposing (pageNames)
import Config.Format.Response
    exposing
        ( pageListCenter
        , topLevelContainer
        )
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Pages.Home.Helpers exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Svgs exposing (construction2)
import Config.Style.Transitions exposing (transitionStyleMedium)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Font as F exposing (color)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import Svg.Attributes as SvgAttr 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.pageHome ++ " ( )"
    , attributes = []
    , element = homeContainer shared.device
    }



-- construction2
--             { elementAttributes =
--                 [ centerX
--                 , centerY
--                 , transitionStyleMedium
--                 , mouseOver [ F.color colourTheme.textDarkOrange ]
--                 ]
--             , sharedModel = shared
--             , svgAttributes =
--                 [ SvgAttr.width "300" ]
--             }
-- , element = homeContainer shared.device


homeContainer : Device -> Element msg
homeContainer device =
    topLevelContainer (homeList device)


homeList : Device -> Element msg
homeList device =
    column pageListCenter
        [ case device.class of
            Desktop ->
                desktopHomePage

            BigDesktop ->
                desktopHomePage

            Tablet ->
                case device.orientation of
                    Portrait ->
                        mobileLargeHomePage

                    Landscape ->
                        mobileLargeHomePage

            Phone ->
                case device.orientation of
                    Portrait ->
                        mobileSmallHomePage

                    Landscape ->
                        mobileSmallHomePage
        ]