/// Layout items for PrayerTracker
module PrayerTracker.Views.Layout

open Giraffe.ViewEngine
open Giraffe.ViewEngine.Accessibility
open PrayerTracker.ViewModels
open System.Globalization

/// Get the two-character language code for the current request
let langCode () = if CultureInfo.CurrentCulture.Name.StartsWith "es" then "es" else "en"


/// Navigation items
module Navigation =

    /// Top navigation bar
    let top m =
        let s          = I18N.localizer.Force()
        let menuSpacer = rawText "  "
        let _dropdown  = _class "dropdown-btn"
        let leftLinks  = [
            match m.User with
            | Some u ->
                li [ _class "dropdown" ] [
                    a [ _dropdown; _ariaLabel s["Requests"].Value; _title s["Requests"].Value; _roleButton ] [
                        icon "question_answer"; space; locStr s["Requests"]; space; icon "keyboard_arrow_down" ]
                    div [ _class "dropdown-content"; _roleMenuBar ] [
                        pageLink "/prayer-requests"
                            [ _roleMenuItem ]
                            [ icon "compare_arrows"; menuSpacer; locStr s["Maintain"] ]
                        pageLink "/prayer-requests/view"
                            [ _roleMenuItem ]
                            [ icon "list"; menuSpacer; locStr s["View List"] ] ] ]
                li [ _class "dropdown" ] [
                    a [ _dropdown; _ariaLabel s["Group"].Value; _title s["Group"].Value; _roleButton ] [
                        icon "group"; space; locStr s["Group"]; space; icon "keyboard_arrow_down" ]
                    div [ _class "dropdown-content"; _roleMenuBar ] [
                        pageLink "/small-group/members"
                            [ _roleMenuItem ]
                            [ icon "email"; menuSpacer; locStr s["Maintain Group Members"] ]
                        pageLink "/small-group/announcement"
                            [ _roleMenuItem ]
                            [ icon "send";  menuSpacer; locStr s["Send Announcement"] ]
                        pageLink "/small-group/preferences"
                            [ _roleMenuItem ]
                            [ icon "build"; menuSpacer; locStr s["Change Preferences"] ] ] ]
                if u.IsAdmin then
                    li [ _class "dropdown" ] [
                        a [ _dropdown
                            _ariaLabel s["Administration"].Value
                            _title     s["Administration"].Value
                            _roleButton ] [
                            icon "settings"; space; locStr s["Administration"]; space; icon "keyboard_arrow_down" ]
                        div [ _class "dropdown-content"; _roleMenuBar ] [
                            pageLink "/churches" [ _roleMenuItem ] [ icon "home";  menuSpacer; locStr s["Churches"] ]
                            pageLink "/small-groups"
                                [ _roleMenuItem ]
                                [ icon "send";  menuSpacer; locStr s["Groups"] ]
                            pageLink "/users" [ _roleMenuItem ] [ icon "build"; menuSpacer; locStr s["Users"] ] ] ]
            | None ->
                match m.Group with
                | Some _ ->
                    li [] [
                        pageLink "/prayer-requests/view"
                            [ _ariaLabel s["View Request List"].Value; _title s["View Request List"].Value ]
                            [ icon "list"; space; locStr s["View Request List"] ] ]
                | None ->
                    li [ _class "dropdown" ] [
                        a [ _dropdown; _ariaLabel s["Log On"].Value; _title s["Log On"].Value; _roleButton ] [
                            icon "security"; space; locStr s["Log On"]; space; icon "keyboard_arrow_down" ]
                        div [ _class "dropdown-content"; _roleMenuBar ] [
                            pageLink "/user/log-on" [ _roleMenuItem ] [ icon "person"; menuSpacer; locStr s["User"] ]
                            pageLink "/small-group/log-on"
                                [ _roleMenuItem ]
                                [ icon "group";  menuSpacer; locStr s["Group"] ] ] ]
                    li [] [
                        pageLink "/prayer-requests/lists"
                            [ _ariaLabel s["View Request List"].Value; _title s["View Request List"].Value ]
                            [ icon "list"; space; locStr s["View Request List"] ] ]
            li [] [
                a [ _href "/help"; _ariaLabel s["Help"].Value; _title s["View Help"].Value; _target "_blank" ] [
                    icon "help"; space; locStr s["Help"] ] ] ]
        let rightLinks =
            match m.Group with
            | Some _ -> [
                match m.User with
                | Some _ ->
                    li [] [
                        pageLink "/user/password"
                            [ _ariaLabel s["Change Your Password"].Value; _title s["Change Your Password"].Value ]
                            [ icon "lock"; space; locStr s["Change Your Password"] ] ]
                | None -> ()
                li [] [
                    pageLink "/log-off"
                        [ _ariaLabel s["Log Off"].Value; _title s["Log Off"].Value; Target.body ]
                        [ icon "power_settings_new"; space; locStr s["Log Off"] ] ] ]
            | None -> []
        header [ _class "pt-title-bar"; Target.content ] [
            section [ _class "pt-title-bar-left"; _ariaLabel "Left side of top menu" ] [
                span [ _class "pt-title-bar-home" ] [
                    pageLink "/" [ _title s["Home"].Value ] [ locStr s["PrayerTracker"] ] ]
                ul [] leftLinks ]
            section [ _class "pt-title-bar-center"; _ariaLabel "Empty center space in top menu" ] []
            section [ _class "pt-title-bar-right"; _roleToolBar; _ariaLabel "Right side of top menu" ] [
                ul [] rightLinks ] ]

    /// Identity bar (below top nav)
    let identity m =
        let s = I18N.localizer.Force()
        header [ _id "pt-language"; Target.body ] [
            div [] [
                span [ _title s["Language"].Value ] [ icon "record_voice_over"; space ]
                match langCode () with
                | "es" ->
                    strong [] [ locStr s["Spanish"] ]
                    rawText "     "
                    pageLink "/language/en" [] [ locStr s["Change to English"] ]
                | _ ->
                    strong [] [ locStr s["English"] ]
                    rawText "     "
                    pageLink "/language/es" [] [ locStr s["Cambie a Español"] ] ]
            match m.Group with
            | Some g ->
                [ match m.User with
                  | Some u ->
                      span [ _class "u" ] [ locStr s["Currently Logged On"] ]
                      rawText "   "
                      icon "person"
                      strong [] [ str u.Name ]
                      rawText "    "
                  | None ->
                      locStr s["Logged On as a Member of"]
                      rawText "  "
                  icon "group"
                  space
                  match m.User with
                  | Some _ -> pageLink "/small-group" [] [ strong [] [ str g.Name ] ]
                  | None -> strong [] [ str g.Name ] ]
            | None -> []
            |> div [] ]


/// Content layouts
module Content =

    /// Content layout that tops at 60rem
    let standard = div [ _class "pt-content" ]

    /// Content layout that uses the full width of the browser window
    let wide = div [ _class "pt-content pt-full-width" ]


/// Separator for parts of the title
let private titleSep = rawText " « "

/// Common HTML head tag items
let private commonHead = [
    meta [ _name "viewport"; _content "width=device-width, initial-scale=1" ]
    meta [ _name "generator"; _content "Giraffe" ]
    link [ _rel "stylesheet"; _href "https://fonts.googleapis.com/icon?family=Material+Icons" ]
    link [ _rel "stylesheet"; _href "/_/app.css" ] ]

/// Render the <head> portion of the page
let private htmlHead viewInfo pgTitle =
    let s = I18N.localizer.Force()
    head [] [
        meta [ _charset "UTF-8" ]
        title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker"] ]
        yield! commonHead
        for cssFile in viewInfo.Style do
            link [ _rel "stylesheet"; _href $"/_/{cssFile}.css"; _type "text/css" ] ]


/// Render a link to the help page for the current page
let private helpLink link =
    let s = I18N.localizer.Force()
    sup [ _class "pt-help-link" ] [
        a [ _href    link
            _title   s["Click for Help on This Page"].Value
            _onclick $"return PT.showHelp('{link}')" ] [ iconSized 18 "help_outline" ] ]

/// Render the page title, and optionally a help link
let private renderPageTitle viewInfo pgTitle =
    h2 [ _id "pt-page-title" ] [
        match viewInfo.HelpLink with
        | Some link -> helpLink $"/help/{link}"
        | None -> ()
        locStr pgTitle ]

/// Render the messages that may need to be displayed to the user
let private messages viewInfo =
    let s = I18N.localizer.Force()
    if List.isEmpty viewInfo.Messages then []
    else
        viewInfo.Messages
        |> List.map (fun msg ->
            div [ _class $"pt-msg {MessageLevel.toCssClass msg.Level}" ] [
                match msg.Level with
                | Info -> ()
                | lvl ->
                    strong [] [ locStr s[MessageLevel.toString lvl] ]
                    rawText " &#xbb; "
                rawText msg.Text.Value
                match msg.Description with
                | Some desc ->
                    br []
                    div [ _class "description" ] [ rawText desc.Value ]
                | None -> () ])
        |> div [ _class "pt-messages" ]
        |> List.singleton


open NodaTime

/// Render the <footer> at the bottom of the page
let private htmlFooter viewInfo =
    let s          = I18N.localizer.Force()
    let imgText    = $"""%O{s["PrayerTracker"]} %O{s["from Bit Badger Solutions"]}"""
    let resultTime = (SystemClock.Instance.GetCurrentInstant() - viewInfo.RequestStart).TotalSeconds
    footer [ _class "pt-footer" ] [
        div [ _id "pt-legal" ] [
            pageLink "/legal/privacy-policy" [] [ locStr s["Privacy Policy"] ]
            rawText " &nbsp; "
            pageLink "/legal/terms-of-service" [] [ locStr s["Terms of Service"] ]
            rawText " &nbsp; "
            a [ _href   "https://git.bitbadger.solutions/bit-badger/PrayerTracker"
                _title  s["View source code and get technical support"].Value
                _target "_blank"
                _relNoOpener ] [
                locStr s["Source & Support"] ] ]
        div [ _id "pt-footer" ] [
            pageLink "/" [ _style "line-height:28px;" ] [
                img [ _src   $"""/img/%O{s["footer_en"]}.png"""
                      _alt   imgText
                      _title imgText
                      _width "331"; _height "28" ] ]
            span [ _id "pt-version" ] [ str viewInfo.Version ]
            space
            i [ _title s["This page loaded in {0:N3} seconds", resultTime].Value; _class "material-icons md-18" ] [
                str "schedule" ] ] ]

/// The content portion of the PrayerTracker layout
let private contentSection viewInfo pgTitle (content: XmlNode) =
    [ Navigation.identity viewInfo
      renderPageTitle viewInfo pgTitle
      yield! messages viewInfo
      match viewInfo.ScopedStyle with
      | [] -> ()
      | styles -> style [] [ rawText (styles |> String.concat " ") ]
      content
      htmlFooter viewInfo
      match viewInfo.OnLoadScript with
      | Some onLoad ->
          let doCall = if onLoad.EndsWith ")" then "" else "()"
          script [] [
              rawText $"
                  window.doOnLoad = () => {{
                      if (window.PT) {{
                          {onLoad}{doCall}
                          delete window.doOnLoad
                      }} else {{ setTimeout(window.doOnLoad, 500) }}
                  }}
                  window.doOnLoad()" ]
      | None -> () ]

/// The HTML head element for partial responses
let private partialHead pgTitle =
    let s = I18N.localizer.Force()
    head [] [
        meta [ _charset "UTF-8" ]
        title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker"] ] ]

/// The body of the PrayerTracker layout
let private pageLayout viewInfo pgTitle content =
    body [] [
        Navigation.top viewInfo
        div [ _id "pt-body"; Target.content ] (contentSection viewInfo pgTitle content)
        match viewInfo.Layout with
        | FullPage ->
            script [ _src "/js/ckeditor/ckeditor.js" ] []
            Htmx.Script.minified
            script [ _src "/_/app.js" ] []
        | _ -> () ]

/// The standard layout(s) for PrayerTracker
let standard viewInfo pageTitle content =
    let s       = I18N.localizer.Force()
    let pgTitle = s[pageTitle]
    html [ _lang (langCode ()) ] [
        match viewInfo.Layout with
        | FullPage ->
            htmlHead   viewInfo pgTitle
            pageLayout viewInfo pgTitle content
        | PartialPage ->
            partialHead pgTitle
            pageLayout viewInfo pgTitle content
        | ContentOnly ->
            partialHead pgTitle
            body [] (contentSection viewInfo pgTitle content) ]

/// A layout with nothing but a title and content
let bare pageTitle content =
    let s = I18N.localizer.Force()
    html [ _lang (langCode ()) ] [
        partialHead s[pageTitle]
        body [] [ content ] ]

/// Help page layout
let help pageTitle isHome content =
    let s       = I18N.localizer.Force()
    let pgTitle = s[pageTitle]
    html [ _lang (langCode ()) ] [
        head [] [
            meta [ _charset "UTF-8" ]
            meta [ _name "viewport"; _content "width=device-width, initial-scale=1" ]
            title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker Help"] ]
            link [ _href "https://fonts.googleapis.com/icon?family=Material+Icons"; _rel "stylesheet" ]
            link [ _href "/_/app.css"; _rel "stylesheet" ]
            link [ _href "/_/help.css"; _rel "stylesheet" ] ]
        body [] [
            header [ _class "pt-title-bar" ] [
                section [ _class "pt-title-bar-left" ] [
                    span [ _class "pt-title-bar-home" ] [
                        a [ _href "/help"; _title "Home" ] [ locStr s["PrayerTracker"] ] ] ]
                section [ _class "pt-title-bar-right" ] [ locStr s["Help"] ] ]
            div [ _id "pt-body" ] [
                header [ _id "pt-language" ] [
                    div [] [
                        locStr s["Language"]; rawText ": "
                        match langCode () with
                        | "es" ->
                            locStr s["Spanish"]; rawText " &bull; "
                            a [ _href "/language/en" ] [ locStr s["Change to English"] ]
                        | _ ->
                            locStr s["English"]; rawText " &bull; "
                            a [ _href "/language/es" ] [ locStr s["Cambie a Español"] ] ] ]
                h2 [ _id "pt-page-title" ] [ locStr pgTitle ]
                div [ _class "pt-content" ] [
                    yield! content
                    div [ _class "pt-close-window" ] [
                        p [ _class "pt-center-text" ] [
                            a [ _href "#"; _title s["Click to Close This Window"].Value
                                _onclick "window.close(); return false" ] [
                                i [ _class "material-icons"] [ rawText "cancel" ]
                                space; locStr s["Close Window"] ] ] ]
                    if not isHome then
                        div [ _class "pt-help-index" ] [
                            p [ _class "pt-center-text" ] [
                                a [ _href "/help"; _title s["Help Index"].Value ] [
                                    rawText "&#xab; "; locStr s["Back to Help Index"] ] ] ] ] ] ] ]