namespace web_api_cookbook

open web_api_cookbook
open web_api_cookbook.Exercises
open WebSharper
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Html

[<JavaScript>]
module Exercise =
    let private c = attr.``class``
    let private showHide () =
        let show = Var.Create false
        let text =
            function
            | true -> "(Hide)"
            | false -> "(Show)"
            |> View.MapCached <| show.View

        let toggle =
            fun _ _ curr ->
                Var.Set show (not curr)
            |> on.clickView show.View

        show.View, div [c "button button--text"; toggle] [textView text]

    let doc title description content =
        let expanded, showHide = showHide ()
        div [c "exercise"] [
            h2 [c "exercise__title"] [showHide; text title]
            fun () ->
                div [c "exercise__section"] [
                    div [c "exercise__description"] [text description]
                    div [c "exercise__content"] [content ()]
                ]
            |> Doc.When expanded
        ]

[<JavaScript>]
module Client =
    [<SPAEntryPoint>]
    let Main () =
        div [] [
            h1 [] [text "Using Various Browser Web APIs via WebSharper (in F#)"]
            p [] [
                text "WebSharper is a web framework that provides a functional reactive programming '-ish' API for use in web development. It supports a variety of applicative and monadic combinators that work natuarally with F#, making it a pleasure to use."]
            p [] [text "On this page I've implemented code snippets that use various features of the browser's Web API, and WebSharper. The source code can be viewed "; a [] [text "here."]]
            Exercise.doc
                "Using requestAnimationFrame"
                "The requestAnimationFrame function is used to provide a callback to the browser, which is invoked before the browser repaints the page. This can be used to efficiently do animations asynchronously. This snippet adjusts the opacity of a button over time after it is clicked."
                RequestAnimationFrame.doc
            Exercise.doc
                "Syncing Data Across Tabs via LocalStorage"
                "Besides simply storing data, LocalStorage can be used as a simple method for syncing state between different tabs. In addition to storing the data, storage events must also be observed to keep the data synchronized. You can see this in action by opening this page in two tabs and entering/deleting data using the below form."
                LocalStorageSync.doc
        ]
        |> Doc.RunById "main"