module Items.WelcomeScreen exposing (..)

import Color exposing (Color)
import Element exposing (Element)
import Element.Background
import Items.FlavorPicker as FlavorPicker
import Items.Introduction as Intro
import Items.LoginScreen as Login
import Items.VaultPicker as VaultPicker
import Matrix
import Theme

-- MODEL

type alias Model =
    { loginView : Maybe Login.Model
    , vaultView : VaultPicker.Model
    }

type Msg
    = OnAddVault
    | OnLoginView Login.Msg
    | OnSubmitVault { name : String, vault : Matrix.Vault }
    | OnVaultView VaultPicker.Msg

init : List { name : String, vault : Matrix.Vault } -> Model
init vaults =
    { loginView = Nothing
    , vaultView = VaultPicker.init vaults
    }

-- UPDATE

update : Msg -> Model -> Model
update msg model =
    case msg of
        OnAddVault ->
            case model.loginView of
                Just _ ->
                    model
                
                Nothing ->
                    { model | loginView = Just Login.init }

        OnLoginView m ->
            { model
            | loginView = Maybe.map (Login.update m) model.loginView
            }
        
        OnSubmitVault vault ->
            { model
            | loginView = Nothing
            , vaultView = VaultPicker.addVault vault model.vaultView
            }
        
        OnVaultView m ->
            { model
            | vaultView = VaultPicker.update m model.vaultView
            }

-- VIEW

getVault : Int -> Model -> Maybe Matrix.Vault
getVault i model =
    VaultPicker.getVault i model.vaultView

view :
    { colorBackground : Color
    , colorBackground2 : Color
    , colorMain : Color
    , colorMenu : Color
    , colorText : Color
    , colorTextField : Color
    , height : Int
    , flavor : Theme.Flavor
    , model : Model
    , onFlavorPick : Theme.Flavor -> msg
    , onSelectVault : Int -> msg
    , toMsg : Msg -> msg
    , width : Int
    } -> Element msg
view data =
    let
        goesVertical = 2 * data.width <= 3 * data.height
        direction = if goesVertical then Element.column else Element.row
        width = if goesVertical then data.width else data.width // 2
        height = if goesVertical then data.height // 2 else data.height
    in
        case data.model.loginView of
            Just m ->
                direction
                    [ Element.height (Element.px data.height)
                    , Element.width (Element.px data.width)
                    ]
                    [ viewIntroduction
                        { colorBackground = data.colorBackground
                        , colorItem = data.colorText
                        , colorList = data.colorMenu
                        , height = height
                        , model = data.model.vaultView
                        , onSelectVault = data.onSelectVault
                        , toMsg = data.toMsg
                        , width = width
                        }
                    , Login.view
                        { colorBackground = data.colorBackground2
                        , colorMain = data.colorMain
                        , colorMenu = data.colorMenu
                        , colorText = data.colorText
                        , colorTextField = data.colorTextField
                        , height = height
                        , flavor = data.flavor
                        , model = m
                        , onFlavorPick = data.onFlavorPick
                        , onSubmit = \vault -> OnSubmitVault { name = "New Vault", vault = vault } |> data.toMsg
                        , toMsg = OnLoginView >> data.toMsg
                        , width = width
                        }
                    ]

            Nothing ->
                viewIntroduction
                    { colorBackground = data.colorBackground
                    , colorItem = data.colorText
                    , colorList = data.colorMenu
                    , height = data.height
                    , model = data.model.vaultView
                    , onSelectVault = data.onSelectVault
                    , toMsg = data.toMsg
                    , width = data.width
                    }
                    |> Element.el
                        [ Element.Background.color (Theme.toElmUiColor data.colorBackground)
                        , Element.inFront
                            ( FlavorPicker.view
                                { height = 30
                                , flavor = data.flavor
                                , onClick = data.onFlavorPick
                                , themeIcon = always data.colorText
                                , width = 30
                                }
                                |> Element.el [ Element.alignRight ]
                                |> Element.el [ Element.padding 10, Element.width Element.fill ]
                            )
                        ]

viewIntroduction :
    { colorBackground : Color
    , colorItem : Color
    , colorList : Color
    , height : Int
    , model : VaultPicker.Model
    , onSelectVault : Int -> msg
    , toMsg : Msg -> msg
    , width : Int
    } -> Element msg
viewIntroduction data =
    [ Intro.view
        { colorBackground = data.colorBackground
        , width = data.width
        }
    , VaultPicker.view
        { colorItem = data.colorItem
        , colorList = data.colorList
        , onAddVault = data.toMsg OnAddVault
        , onSelectVault = data.onSelectVault
        , model = data.model
        , width = Basics.min 360 (4 * data.width // 5)
        }
        |> Element.el
            [ Element.centerX
            ]
    ]
        |> Element.column
            [ Element.height (Element.px data.height)
            , Element.scrollbarY
            , Element.width (Element.px data.width)
            ]