module TextInput exposing (..)

import Browser
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html exposing (Html)


type Msg
    = UserTypedText String
    | UserTypedPassword String
    | UserToggledCheckbox Bool


type alias Model =
    { text : String, password : String, showPassword : Bool }


view : Model -> Html Msg
view model =
    layout [ padding 50 ] <|
        column [ spacing 30 ]
            [ Input.text [ width <| maximum 300 fill ]
                { onChange = UserTypedText
                , text = model.text
                , placeholder = Just <| Input.placeholder [] <| text "Type here"
                , label = Input.labelAbove [] <| text "Text input"
                }
            , Input.newPassword [ width <| maximum 300 fill ]
                { onChange = UserTypedPassword
                , text = model.password
                , placeholder =
                    Just <|
                        Input.placeholder [] <|
                            text "Enter new password"
                , label = Input.labelAbove [] <| text "New password"
                , show = model.showPassword
                }
            , Input.checkbox []
                { onChange = UserToggledCheckbox
                , icon = Input.defaultCheckbox
                , checked = model.showPassword
                , label = Input.labelRight [] <| text "Show password"
                }
            ]


update : Msg -> Model -> Model
update msg model =
    case msg of
        UserTypedText s ->
            { model | text = s }

        UserTypedPassword s ->
            { model | password = s }

        UserToggledCheckbox _ ->
            { model | showPassword = not model.showPassword }


main : Program () Model Msg
main =
    Browser.sandbox
        { init = { text = "", password = "", showPassword = False }
        , view = view
        , update = update
        }