(ns auto-ap.ssr.ui
  (:require
   [auto-ap.client-routes :as client-routes]
   [auto-ap.ssr.company-dropdown :as company-dropdown]
   [auto-ap.ssr.login-dropdown :as login-dropdown]
   [bidi.bidi :as bidi]
   [hiccup2.core :as hiccup]))

(defn html-page [hiccup]
  {:status  200
   :headers {"Content-Type" "text/html"}
   :body    (str
              "<!DOCTYPE html>"
              (hiccup/html
                   {}
                   hiccup))})

(defn base-page [request contents side-bar-contents]
  (html-page 
    [:html.has-navbar-fixed-top
     [:head
      [:meta {:charset "utf-8"}]
      [:meta {:http-equiv "X-UA-Compatible", :content "IE=edge"}]
      [:meta {:name "viewport", :content "width=device-width, initial-scale=1"}]
      [:title "Integreat"]
      [:link {:rel "stylesheet", :href "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css", :integrity "sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=", :crossorigin "anonymous"}]
      [:link {:href "/css/font.min.css", :rel "stylesheet"}]
      [:link {:rel "stylesheet", :href "/css/bulma.min.css"}]
      [:link {:rel "stylesheet", :href "/css/bulma-calendar.min.css"}]
      [:link {:rel "stylesheet", :href "/css/bulma-badge.min.css"}]
      [:link {:rel "stylesheet", :href "/css/react-datepicker.min.inc.css"}]
      [:link {:rel "stylesheet", :href "/css/animate.css"}]
      [:link {:rel "stylesheet", :href "/finance-font/style.css"}]
      [:link {:rel "stylesheet", :href "/css/main.css"}]
      [:link {:rel "stylesheet", :href "https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css"}]
      #_[:link {:rel "stylesheet", :href "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.min.css"}]
      [:script {:src "https://unpkg.com/hyperscript.org@0.9.7"}]
      [:script {:src          "https://unpkg.com/htmx.org@1.8.4"
                :integrity    "sha384-wg5Y/JwF7VxGk4zLsJEcAojRtlVp1FKKdGy1qN+OMtdq72WRvX/EdRdqg/LOhYeV"
                :crossorigin= "anonymous"}]
      [:script {:type "text/javascript", :src "https://cdn.yodlee.com/fastlink/v4/initialize.js", :async "async" }]]
     [:script {:type "text/javascript", :src "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"}]
     [:body
      [:div {:id "app"}
       [:div 
        [:nav {:class "navbar has-shadow is-fixed-top is-grey"}
         
         [:div {:class "container"}
          [:div {:class "navbar-brand"}
           [:a {:class "navbar-item", :href "../"}
            [:img {:src "/img/logo.png"}]]]
          [:div.navbar-menu {:id "navMenu"}
           [:div.navbar-start
            [:a.navbar-item {:href "/"}
             "Home" ]
            [:a.navbar-item {:href (bidi/path-for client-routes/routes :unpaid-invoices)}
             "Invoices" ]
            [:a.navbar-item {:href (bidi/path-for client-routes/routes :payments)}
             "Payments" ]
            [:a.navbar-item {:href (bidi/path-for client-routes/routes :sales-orders)}
             "POS" ]
            [:a.navbar-item {:href (bidi/path-for client-routes/routes :transactions)}
             "Transactions" ]
            [:a.navbar-item {:href (bidi/path-for client-routes/routes :ledger)}
             "Ledger" ]]
           [:div.navbar-end
            (company-dropdown/dropdown request)
            (login-dropdown/dropdown request)]]]]
        [:div {:class "columns has-shadow", :id "mail-app", :style "margin-bottom: 0px; height: calc(100vh - 46px);"}
         [:aside {:class "column aside menu is-2 "}
          [:div {:class "main left-nav"}
           side-bar-contents]]
         [:div {:class "column messages hero ", :id "message-feed", :style "overflow: auto;"}
          [:div {:class "inbox-messages"}
           contents]]]
        [:div]
        [:div {:id "dz-hidden"}]]]
      [:div#modal-holder]]]))
