module Layouts.Navbar exposing (Model, Msg, Props, layout)

import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Effect exposing (Effect)
import Element exposing (..)
import Element.Background as B
import Element.Font as F
import Element.Region exposing (description)
import Html exposing (Html)
import Html.Attributes as H exposing (class, style)
import Layout exposing (Layout)
import Route exposing (Route)
import Shared
import View exposing (View)


type alias Props =
    {}


layout : Props -> Shared.Model -> Route () -> Layout () Model Msg contentMsg
layout props shared route =
    Layout.new
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- MODEL


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init _ =
    ( {}
    , Effect.none
    )



-- UPDATE


type Msg
    = ReplaceMe


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


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



-- image [spacing 30, width <| px 150] {src = "navbar/nutrivorelogo.png", description = ""}
-- VIEW


view : { toContentMsg : Msg -> contentMsg, content : View contentMsg, model : Model } -> View contentMsg
view { toContentMsg, model, content } =
    { title = content.title
    , attributes = [ F.family [ spartanFont ] ]
    , element =
        let
            localhostUrl =
                "http://localhost:1234/"
        in
        row
            [ width fill
            , height fill
            , B.color colourTheme.backgroundColour
            ]
            [ column
                [ width <| px 200
                , alignLeft
                , alignTop
                , paddingEach { top = 20, bottom = 0, left = 10, right = 0 }
                , htmlAttribute (H.style "position" "fixed")
                , htmlAttribute (H.style "left" "0")
                , htmlAttribute (H.style "top" "0")
                , htmlAttribute (H.style "height" "100vh")
                , htmlAttribute (H.style "z-index" "10") -- Ensure navbar stays on top
                , htmlAttribute (H.style "transform-style" "preserve-3d")
                ]
                [ column
                    [ spacing 10
                    , centerX
                    , height fill
                    , F.color colourTheme.nonHighlightedText
                    ]
                    [ image [ spacing 2, width <| px 80, centerX ] { src = "navbar/nutrivorelogo.png", description = "" }
                    , link nonHighlightedTitleFormat { url = localhostUrl ++ pageNames.pageHome, label = transitionNonHighlightedLinkHover <| text "THE NUTRIVORE" }
                    , link navBarLinkFormat { url = localhostUrl ++ "platforms", label = transitionNonHighlightedLinkHoverWithMove <| text "PLATFORMS" }
                    , link navBarLinkFormat { url = localhostUrl ++ "services", label = transitionNonHighlightedLinkHoverWithMove <| text "SERVICES" }
                    , link navBarLinkFormat { url = localhostUrl ++ "arguments", label = transitionNonHighlightedLinkHoverWithMove <| text "ARGUMENTS" }
                    , link navBarLinkFormat { url = localhostUrl ++ "blog", label = transitionNonHighlightedLinkHoverWithMove <| text "BLOG" }
                    , link navBarLinkFormat { url = localhostUrl ++ "nutridex", label = transitionNonHighlightedLinkHoverWithMove <| text "NUTRI-DEX" }
                    , link navBarLinkFormat { url = localhostUrl ++ "support", label = transitionNonHighlightedLinkHoverWithMove <| text "SUPPORT" }
                    , link navBarLinkFormat { url = localhostUrl ++ "interviews", label = transitionNonHighlightedLinkHoverWithMove <| text "INTERVIEWS" }
                    , link navBarLinkFormat { url = localhostUrl ++ "contact", label = transitionNonHighlightedLinkHoverWithMove <| text "CONTACT" }
                    , link navBarLinkFormat { url = localhostUrl ++ "dodgers", label = transitionNonHighlightedLinkHoverWithMove <| text "DODGERS" }
                    ]
                ]
            , el
                [ width fill
                , height fill
                , paddingEach { top = 0, right = 0, bottom = 0, left = 200 }
                ]
                content.element
            ]
    }