ui.next validation

namespace Validation_Scratchpad

open System
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.UI.Next
open IntelliFactory.WebSharper.UI.Next.Html

[<JavaScript>]
module Client =

    type EMailAddress = EMail of string
    type TelephoneNumber = TN of string

    let showPhone (TN s) = s
    let showEMail (EMail e) = e

    type Person =
        {
            PersonName : string
            PersonEMailAddress : EMailAddress
            PersonTelephoneNumber : TelephoneNumber
        }

    let mkPerson name num email =
        {
            PersonName = name
            PersonEMailAddress = email
            PersonTelephoneNumber = num
        }

    type ErrorMsg = string
    type Result<'a> = | Success of 'a | Failure of ErrorMsg

    let txt = Doc.TextNode
    let (==>) attrId attrVal = Attr.Create attrId attrVal

    let validateNum vNum =
        View.FromVar vNum
        |> View.Map (fun num ->
            if String.forall Char.IsDigit num && num.Length > 0 then
                TN num |> Success
            else
                Failure "Not a valid telephone number"
        )

    let validateEmail vEmail =
        View.FromVar vEmail
        |> View.Map (fun (email : string) ->
            if email.Contains("@") then
                EMail email |> Success
            else
                Failure "Not a valid email address"
        )

    let DisplayFailure = function
        | Success _ -> ""
        | Failure err -> err + ", "

    let PersonView nameView telView emailView =
        View.Do {
            let! name = nameView
            let! tel = telView
            let! email = emailView
            match (tel, email) with
                | (Success t, Success e) ->
                    return mkPerson name t e |> Success
                | _ ->
                    return
                        DisplayFailure tel + DisplayFailure email
                        |> Failure
        }

    let showPerson p =
        Div0 [
            P0 [txt <| "Name: " + p.PersonName]
            P0 [txt <| "Phone Number: " + (showPhone p.PersonTelephoneNumber)]
            P0 [txt <| "EMail Address: " + (showEMail p.PersonEMailAddress)]
        ]

    let ShowResult personView =
        personView
        |> View.Map (fun personRes ->
            match personRes with
                | Success p -> showPerson p
                | Failure errs -> txt errs
        )

    let myForm =
        let rvName = Var.Create ""
        let rvTel = Var.Create ""
        let rvEmail = Var.Create ""

        Div0 [
            Div0 [
                Div0 [
                    Html.Label ["for" ==> "nameBox"] [txt "Name:"]
                    Doc.Input ["id" ==> "nameBox"] rvName
                ]

                Div0 [
                    Html.Label ["for" ==> "telBox"] [txt "Telephone Number:"]
                    Doc.Input ["id" ==> "telBox"] rvTel
                ]

                Div0 [
                    Html.Label ["for" ==> "emailBox"] [txt "Email:"]
                    Doc.Input ["id" ==> "emailBox"] rvEmail
                ]
            ]

            Div0 [
                txt "Result"
                Elements.Br [][]
                PersonView (View.FromVar rvName) (validateNum rvTel) (validateEmail rvEmail)
                |> ShowResult
                |> Doc.EmbedView
            ]
        ]

    let Main =
        JavaScript.Log("Running JavaScript Entry Point..")
        Doc.RunById "my-container" myForm