namespace web_api_cookbook.Exercises

open WebSharper
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Html
open web_api_cookbook.UI
open web_api_cookbook.Units.Animation
open web_api_cookbook.Units.Time
open web_api_cookbook.UI.Components

[<JavaScript>]
module RequestAnimationFrame =
    let doc () =
        let isClicked = Var.Create false
        let opacityAnimated = Animate.valueWhen isClicked.View 1.0 0. 120.<frames/s> 1.<s>
        let opacityStyle = View.MapCached (sprintf "opacity: %f") opacityAnimated
        let animateOnClick =
            fun _ _ ->
                Var.Set isClicked true
            |> on.click

        Button.plain [attr.styleDyn opacityStyle; animateOnClick] "Hide Me"