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 as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
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 =
        row
            [ E.width fill
            , height fill
            , B.color colourTheme.cardBackground
            ]
            [ column
                [ 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")
                , D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
                , D.color colourTheme.highlightTextHover
                ]
                [ column
                    [ alignLeft
                    , height fill
                    , F.color colourTheme.nonHighlightedText
                    ]
                    [ column
                        [ centerX
                        , E.width <| px 200
                        ]
                        [ row
                            (nonHighlightedTitleFormat
                                ++ [ centerX
                                   , spacing 10
                                   , padding 20
                                   ]
                            )
                            [ E.image
                                [ spacing 2
                                , E.width <| px 80
                                , centerX
                                ]
                                { src = "navbar/nutrivorelogo.png"
                                , description = ""
                                }
                            , column []
                                [ link [ centerX ]
                                    { url = localhostUrl ++ pageNames.pageHome
                                    , label = text "upRoot"
                                    }
                                , link [ centerX ]
                                    { url = localhostUrl ++ pageNames.pageHome
                                    , label = text "Health"
                                    }
                                ]
                            ]
                        , el
                            [ E.width <| px 140
                            , alignTop
                            , centerX
                            , D.widthEach
                                { bottom = 1
                                , top = 0
                                , left = 0
                                , right = 0
                                }
                            , D.color colourTheme.nonHighlightedDarkText
                            ]
                            none
                        ]
                    , column
                        [ padding 20, alignTop, alignLeft ]
                        [ column
                            [ F.bold
                            , F.color colourTheme.nonHighlightedText
                            , F.size 17
                            , spacing 8
                            ]
                          <|
                            List.map buttonMaker
                                [ pageNames.pageRoot
                                , pageNames.pageServices
                                , pageNames.pageHyperBlog
                                , pageNames.pageDebate
                                , pageNames.pageDodgers
                                , pageNames.pageNutriDex
                                , pageNames.pageInterviews
                                , pageNames.pageDonate
                                , pageNames.pageContact
                                ]
                        ]
                    ]
                , row
                    [ alignBottom
                    , E.width fill
                    , E.height <| px 100
                    ]
                    [ row
                        [ centerX
                        , centerY
                        , E.width fill
                        , E.height fill
                        , spacing 10
                        , paddingEach { top = 40, bottom = 10, left = 20, right = 20 }
                        ]
                        [ E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/gitlab-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/twitter-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/mastodon-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 33
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/discord-light.png"
                            , description = ""
                            }
                        ]
                    ]
                ]
            , el
                [ E.width fill
                , height fill
                , paddingEach
                    { top = 0
                    , right = 0
                    , bottom = 0
                    , left = 200
                    }
                ]
                content.element
            ]
    }


localhostUrl =
    "http://localhost:1234/"


buttonMaker : String -> Element msg
buttonMaker name =
    row
        []
        [ column [ E.width <| px 36 ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/" ++ String.toLower name ++ ".png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ String.toLower name
                , label =
                    el
                        [ mouseOver [ F.color colourTheme.highlightText ]
                        , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
                        ]
                    <|
                        text (String.toUpper name)
                }
            ]
        ]