(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 { "@notification.document" "notificationDetails=event.detail.value; showNotification=true"

             :x-data (hx/json {:leftNavShow true
                               :showError false
                               :errorDetails ""
                               :showNotification false
                               :notificationDetails ""})
             "@htmx:response-error.camel" "errorDetails = $event.detail.xhr.response; showError=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
      [: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 {:x-show "showNotification" }
       [:div.relative
        [:button.absolute.right-2.top-2.w-6.h-6.z-50.text-blue-400
         { "@click" "showNotification=false"}
         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.max-h-96
        {:x-show "showNotification"
          "x-transition:enter" "transition duration-300 transform ease-in-out"
          "x-transition:enter-start" "opacity-0 translate-y-full"
          "x-transition:enter-end" "opacity-100 translate-y-0"
          "x-transition:leave" "transition duration-300 transform ease-in-out"
          "x-transition:leave-start" "opacity-100 translate-y-0"
          "x-transition:leave-end" "opacity-0 translate-y-full"}
       
        [:div {:class "p-4 text-lg w-full" :role "alert"}
         [:div.text-sm
          [:pre#notification-details.text-xs {:x-html "notificationDetails"}]]]]]]
     [:div {:x-show "showError" 
                              :x-init ""}
      [: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
         { "@click" "showError=false"}
         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.max-h-96
        {:x-show "showError"
         "x-transition:enter" "transition duration-300"
         "x-transition:enter-start" "opacity-0"
         "x-transition:enter-end" "opacity-100"}
       
        [: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 {:x-data (hx/json {"expandError" false})}
          [:p "Integreat staff have been notified and are looking into it. "]
          [:p "To see error details, " [:a.underline.cursor-pointer {"@click" "expandError=true"} "click here"] "."]
          [:pre#error-details.text-xs {:x-show "expandError" :x-text "errorDetails"}]]]]]]
     (into
      [:div.p-4]
      children)]]

   ])