module MultilineInput exposing (..)

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


type alias Model =
    String


type Msg
    = UserTypedText String


view : Model -> Html Msg
view model =
    layout [ padding 50 ] <|
        Input.multiline
            [ width <| maximum 450 fill
            , height <| px 150
            , Border.rounded 6
            , Border.width 2
            , Border.color <| rgb255 0x72 0x9F 0xCF
            , onDoubleClick <| UserTypedText "Double Click"
            ]
            { onChange = UserTypedText
            , text = model
            , placeholder = Just <| Input.placeholder [] <| text "Type your message"
            , label = Input.labelAbove [] <| text "Message"
            , spellcheck = True
            }


update : Msg -> Model -> Model
update (UserTypedText s) _ =
    s


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