module Main exposing (main)

import Api
import Browser
import Element exposing (Element)
import Element.Background
import GameList exposing (Game, GameList)
import Http
import ScreenSize exposing (ScreenSize)
import Theme


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



-- MODEL


type alias Model =
    { baseUrl : String
    , flavor : Theme.Flavor
    , games : GameList
    , screen : Screen
    , size : ScreenSize
    }


type Screen
    = ViewCreateGame
    | ViewGameSelectionMenu
    | ViewGame Game


type Msg
    = OnGameList GameList.Msg
    | OnScreen Screen
    | OnScreenSize ScreenSize


init : () -> ( Model, Cmd Msg )
init () =
    let
        ( gmdl, gmsg ) =
            GameList.init {}
    in
    ( { baseUrl = "http://localhost:5000"
      , flavor = Theme.Latte
      , games = gmdl
      , screen = ViewGameSelectionMenu
      , size = ScreenSize.init
      }
    , Cmd.batch
        [ ScreenSize.updateScreenSize OnScreenSize
        , Cmd.map OnGameList gmsg
        ]
    )



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        OnGameList m ->
            case GameList.update m model.games of
                ( newMdl, newM ) ->
                    ( { model | games = newMdl }, Cmd.map OnGameList newM )

        OnScreen screen ->
            ( { model | screen = screen }, Cmd.none )

        OnScreenSize size ->
            ( { model | size = size }, Cmd.none )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ ScreenSize.onResize OnScreenSize
        , Sub.map OnGameList (GameList.subscriptions model.games)
        ]



-- VIEW


view : Model -> Browser.Document Msg
view model =
    { title =
        case model.screen of
            ViewCreateGame ->
                "Create Game | Bot-Man-Toe"

            ViewGameSelectionMenu ->
                "Menu | Bot-Man-Toe"

            ViewGame _ ->
                "Replay | Bot-Man-Toe"
    , body =
        viewScreen model
            |> Element.layout
                [ Element.Background.color (Theme.baseUI model.flavor)
                ]
            |> List.singleton
    }


viewScreen : Model -> Element Msg
viewScreen model =
    case model.screen of
        ViewCreateGame ->
            Element.text "Create game menu!"

        ViewGameSelectionMenu ->
            GameList.viewSelection
                { flavor = model.flavor
                , height = model.size.height
                , model = model.games
                , onCreateGame = OnScreen ViewCreateGame
                , onNavigateToGame = OnScreen << ViewGame
                , width = model.size.width
                }

        ViewGame game ->
            GameList.viewGame
                { flavor = model.flavor
                , game = game
                , height = model.size.height
                , onNavigateBack = OnScreen ViewGameSelectionMenu
                , toMsg = OnGameList
                , width = model.size.width
                }