(ns auto-ap.ssr.components.page
  (:require [auto-ap.ssr.components.aside :refer [left-aside-]]
            [auto-ap.ssr.components.navbar :refer [navbar-]]
            [auto-ap.ssr.hx :as hx]
            [auto-ap.ssr.svg :as svg]
            [config.core :refer [env]]
            [hiccup2.core :as hiccup]))

(defn page- [{:keys [nav page-specific client clients client-selection identity app-params request] :or {app-params {}} } & children]
  [:div#app {"_" (hiccup/raw "
                          on notification from body put event.detail.value into #notification-details then add .htmx-added to #notification-holder then remove .hidden from #notification-holder then wait 30ms then remove .htmx-added from #notification-holder
                          on htmx:responseError put event.detail.xhr.response into #error-details then add .htmx-added to #error-holder then remove .hidden from #error-holder then wait 30ms then remove .htmx-added from #error-holder"
                             )
             :x-data (hx/json {:leftNavShow true})}
   (navbar- {:client-selection client-selection
             :clients clients
             :client           client
             :identity         identity
             :dd-env (:dd-env env)})
   [:div#app-contents.flex.pt-16.overflow-hidden (assoc app-params
                                                        :hx-disinherit "*"
                                                        :x-init "leftNavShow = true")
    (left-aside- {:nav           (when nav
                                   (nav request))
                  :page-specific page-specific})
    [:div#main-content {:class "relative w-full h-full overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content  lg:pl-64"
                        ":class" "leftNavShow ? 'lg:pl-64' : ''"
                        :x-effect "leftNavShow ? $el.classList.add('lg:pl-64') : $el.classList.remove('lg:pl-64')"
                        }
     [:div#notification-holder.hidden
      [:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
       [:div.relative
        [:button.absolute.right-2.top-2.w-6.h-6.z-50.text-blue-400
         {"_" (hiccup/raw "on click add .hidden to #notification-holder")}
         svg/filled-x]]

       [:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-blue-800.bg-blue-50.dark:bg-gray-800.dark:text-blue-400.border-blue-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96

        [:div {:class "p-4 text-lg w-full" :role "alert"}
         [:div.text-sm
          [:pre#notification-details.text-xs]]]]]]
     [:div#error-holder.hidden
      [:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
       [:div.relative
        [:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
         {"_" (hiccup/raw "on click add .hidden to #error-holder")}
         svg/filled-x]]

       [:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96

        [:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
         [:div.inline-block.w-8.h-8.mr-2 svg/alert]
         [:span.font-medium "Oh, drat! An unexpected error has occurred."]
         [:div.text-sm
          [:p "Integreat staff have been notified and are looking into it. "]
          [:p "To see error details, " [:a.underline {:href "#" :data-collapse-toggle "error-details"} "click here"] "."]
          [:pre#error-details.text-xs.hidden]]]]]]
     (into
      [:div.p-4]
      children)]]

   ])