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
        column
            [ width fill
            , height fill
            , B.color colourTheme.backgroundColour
            ]
            [ column
                [ height <| px 80
                , centerX
                ]
                [ row
                    [ spacing 30
                    , centerY
                    , F.color colourTheme.nonHighlightedText
                    ]
                    [ image [ spacing 30, width <| px 80 ] { src = "navbar/nutrivorelogo.png", description = "" }
                    , link nonHighlightedTitleFormat { url = localhostUrl ++ pageNames.pageHome, label = transitionNonHighlightedLinkHover <| text "THE NUTRIVORE" }
                    , link navBarLinkFormat { url = localhostUrl ++ "platforms", label = transitionNonHighlightedLinkHover <| text "PLATFORMS" }
                    , link navBarLinkFormat { url = localhostUrl ++ "services", label = transitionNonHighlightedLinkHover <| text "SERVICES" }
                    , link navBarLinkFormat { url = localhostUrl ++ "cebate", label = transitionNonHighlightedLinkHover <| text "DEBATE" }
                    , link navBarLinkFormat { url = localhostUrl ++ "blog", label = transitionNonHighlightedLinkHover <| text "BLOG" }
                    , link navBarLinkFormat { url = localhostUrl ++ "nutridex", label = transitionNonHighlightedLinkHover <| text "NUTRI-DEX" }
                    , link navBarLinkFormat { url = localhostUrl ++ "support", label = transitionNonHighlightedLinkHover <| text "SUPPORT" }
                    , link navBarLinkFormat { url = localhostUrl ++ "interviews", label = transitionNonHighlightedLinkHover <| text "INTERVIEWS" }
                    , link navBarLinkFormat { url = localhostUrl ++ "contact", label = transitionNonHighlightedLinkHover <| text "CONTACT" }
                    ]
                ]
            , content.element
            ]
    }