module Layout exposing (view)

import Element exposing (..)
import Element.Font as Font
import Generated.Routes as Routes exposing (Route, routes)
import Utils.Spa as Spa


view : Spa.LayoutContext msg -> Element msg
view { page, route, global } =
    case global.token of
        Just _ ->
            column [ height fill, width (fill |> maximum 750), centerX ]
                [ el [ padding 15 ] (viewHeader route)
                , page
                ]

        Nothing ->
            if route /= routes.signIn then
                el [ centerX, centerY ]
                    (link
                        [ Font.underline
                        , Font.color (rgb255 204 75 75)
                        , Font.size 48
                        ]
                        { label = text "Login"
                        , url = Routes.toPath routes.signIn
                        }
                    )

            else
                el
                    [ centerX, centerY ]
                    page


viewHeader : Route -> Element msg
viewHeader currentRoute =
    row
        [ spacing 24
        , paddingEach { top = 32, left = 16, right = 16, bottom = 0 }
        , centerX
        , width (fill |> maximum 750)
        ]
        [ viewLink currentRoute ( "Mi", routes.top )
        , viewLink currentRoute ( "Switch Data", routes.switch )
        ]


viewLink : Route -> ( String, Route ) -> Element msg
viewLink currentRoute ( label, route ) =
    if currentRoute == route then
        el
            [ Font.underline
            , Font.color (rgb255 204 75 75)
            , alpha 0.5
            , Font.size 16
            ]
            (text label)

    else
        link
            [ Font.underline
            , Font.color (rgb255 204 75 75)
            , Font.size 16
            , mouseOver [ alpha 0.5 ]
            ]
            { label = text label
            , url = Routes.toPath route
            }