module Main exposing (main)

import Browser
import Browser.Events as Events
import Element exposing (..)
import Element.Background as Background
import Element.Font as Font
import Html exposing (Html)


main : Program Flags Model Msg
main =
    Browser.document { init = init, update = update, subscriptions = subscribe, view = view }


type alias Model =
    { w : Int, h : Int }


type alias Flags =
    ( Int, Int )


init : Flags -> ( Model, Cmd Msg )
init flags =
    case flags of
        ( width, height ) ->
            ( { w = width, h = height }, Cmd.none )


type Msg
    = Resize Int Int


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Resize width height ->
            ( { model | w = width, h = height }, Cmd.none )


subscribe : Model -> Sub Msg
subscribe _ =
    Events.onResize Resize


htmlify : List (Element Msg) -> List (Html Msg)
htmlify =
    List.map (Element.layout [])


vw : Model -> Float -> Float
vw model percent =
    Basics.toFloat model.w * percent / 100


vh : Model -> Float -> Float
vh model percent =
    Basics.toFloat model.h * percent / 100


view : Model -> Browser.Document Msg
view model =
    { title = "MacGregor House"
    , body =
        htmlify
            [ el
                [ width fill
                , height fill
                , Background.color (rgb255 0 0 0)
                ]
                (el
                    [ alignLeft
                    , alignTop
                    , moveRight (vw model 10)
                    , moveDown (vh model 50)
                    , Font.color (rgb255 255 255 255)
                    ]
                    (text "MacGregor House")
                )
            ]
    }