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

import Config.Data.Identity exposing (pageNames)
import Config.Helpers.Cards.Inner.Text exposing (detailBodyLink)
import Config.Helpers.Headers.Types exposing (Header)
import Config.Helpers.Response
    exposing
        ( deviceLogic
        , pageListCenter
        , topLevelContainer
        )
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Style.Colour.Helpers
    exposing
        ( ThemeColor(..)
        , colourTheme
        )
import Config.Style.Fonts
    exposing
        ( defaultFontSize
        , paragraphSpacing
        )
import Config.Style.Glow exposing (glowDeepDarkGrey)
import Config.Style.Icons.Icons
    exposing
        ( upRootLarge
        , upRootMedium
        , upRootSmall
        )
import Config.Style.Transitions exposing (transitionStyleMedium)
import Effect exposing (Effect)
import Element as E
    exposing
        ( Device
        , DeviceClass(..)
        , Element
        , Orientation(..)
        , centerX
        , centerY
        , column
        , el
        , html
        , maximum
        , minimum
        , newTabLink
        , paddingEach
        , paragraph
        , px
        , text
        )
import Element.Background as B exposing (color)
import Element.Border as D exposing (rounded)
import Element.Font as F exposing (color)
import Html exposing (Html)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (Model)
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
    }


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


homeList : Device -> Element msg
homeList device =
    column (pageListCenter device)
        [ deviceLogic
            { desktop = homePage device upRootLarge
            , bigDesktop = homePage device upRootLarge
            , tablet = homePage device upRootMedium
            , phone = homePage device upRootSmall
            }
            device
        ]


homePage : Device -> Html msg -> Element msg
homePage device image =
    column
        [ centerX
        , centerY
        , E.spacing 20
        , E.width (E.fill |> minimum 100)
        , E.width
            (E.fill
                |> maximum
                    (deviceLogic
                        { desktop = 875
                        , bigDesktop = 875
                        , tablet = 500
                        , phone = 325
                        }
                        device
                    )
            )
        ]
        [ el
            [ centerX
            , E.width <|
                px <|
                    deviceLogic
                        { desktop = 675
                        , bigDesktop = 675
                        , tablet = 300
                        , phone = 150
                        }
                        device
            ]
          <|
            html image
        , el
            [ paddingEach
                { top = 15
                , bottom = 15
                , left = 20
                , right = 20
                }
            , glowDeepDarkGrey
            , B.color colourTheme.backgroundDarkGrey
            , D.rounded 10
            , E.width E.fill
            , E.spacing 8
            ]
          <|
            paragraph
                [ F.color colourTheme.textLightGrey
                , paragraphSpacing
                , defaultFontSize
                , centerX
                ]
                [ text "upRootNutrition is an "
                , newTabLink []
                    { url = "https://gitlab.com/upRootNutrition/website"
                    , label = detailBodyLink TextLightOrange "open source"
                    }
                , text " project created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic and semantic analysis, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media."
                ]
        , E.image
            [ E.height <| px 0
            , E.width <| px 0
            ]
            { src = "/assets/twittercard.png", description = "" }
        ]
