namespace Example1

open WebSharper
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

[<JavaScript>]
module Counter =

    type Model = int

    type Action = Increment | Decrement

    let Update (action: Action) (model: Model) : Model =
        match action with
        | Increment -> model + 1
        | Decrement -> model - 1

    let private countStyle =
        Attr.Concat [
            Attr.Style "font-size" "20px"
            Attr.Style "font-family" "monospace"
            Attr.Style "display" "inline-block"
            Attr.Style "width" "50px"
            Attr.Style "text-align" "center"
        ]

    let Render (send: Action -> unit) (model: View<Model>) : Doc =
        div [
            buttonAttr [on.click (fun _ _ -> send Decrement)] [text "-"]
            divAttr [countStyle] [textView (model.Map string)]
            buttonAttr [on.click (fun _ _ -> send Increment)] [text "+"]
        ]
        :> Doc