;; Market navigation components

(defcomp ~navigation/category-link (&key (href :as string) (hx-select :as string) (active :as boolean) (select-colours :as string) (label :as string))
  (div :class "relative nav-group"
    (a :href href :sx-get href :sx-target "#main-panel"
       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
       :aria-selected (if active "true" "false")
       :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " select-colours)
       label)))

(defcomp ~navigation/desktop-category-nav (&key (links :as list) (admin :as list?))
  (nav :class "hidden md:flex gap-4 text-sm ml-2 w-full justify-end items-center"
    links admin))

(defcomp ~navigation/mobile-nav-wrapper (&key (items :as list))
  (div :class "px-4 py-2" (div :class "divide-y" items)))

(defcomp ~navigation/mobile-all-link (&key (href :as string) (hx-select :as string) (active :as boolean) (select-colours :as string))
  (a :role "option" :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :aria-selected (if active "true" "false")
     :class (str "block rounded-lg px-3 py-3 text-base hover:bg-stone-50 " select-colours)
     (div :class "prose prose-stone max-w-none" "All")))

(defcomp ~navigation/mobile-chevron ()
  (svg :class "w-4 h-4 shrink-0 transition-transform group-open/cat:rotate-180"
       :viewBox "0 0 20 20" :fill "currentColor"
    (path :fill-rule "evenodd" :clip-rule "evenodd"
          :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z")))

(defcomp ~navigation/mobile-cat-summary (&key (bg-cls :as string) (href :as string) (hx-select :as string) (select-colours :as string) (cat-name :as string) (count-label :as string) (count-str :as string) (chevron :as list))
  (summary :class (str "flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50" bg-cls)
    (a :href href :sx-get href :sx-target "#main-panel"
       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
       :class (str "font-medium " select-colours " flex flex-row gap-2")
      (div cat-name)
      (div :aria-label count-label count-str))
    chevron))

(defcomp ~navigation/mobile-sub-link (&key (select-colours :as string) (active :as boolean) (href :as string) (hx-select :as string) (label :as string) (count-label :as string) (count-str :as string))
  (a :class (str "snap-start px-2 py-3 rounded " select-colours " flex flex-row gap-2")
     :aria-selected (if active "true" "false")
     :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
    (div label)
    (div :aria-label count-label count-str)))

(defcomp ~navigation/mobile-subs-panel (&key (links :as list))
  (div :class "pb-3 pl-2"
    (div :data-peek-viewport "" :data-peek-size-px "18" :data-peek-edge "bottom" :data-peek-mask "true" :class "m-2 bg-stone-100"
      (div :data-peek-inner "" :class "grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" :aria-label "Subcategories"
        links))))

(defcomp ~navigation/mobile-view-all (&key (href :as string) (hx-select :as string))
  (div :class "pb-3 pl-2"
    (a :class "px-2 py-1 rounded hover:bg-stone-100 block"
       :href href :sx-get href :sx-target "#main-panel"
       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
       "View all")))

(defcomp ~navigation/mobile-cat-details (&key (open :as boolean) (summary :as list) (subs :as list))
  (details :class "group/cat py-1" :open open
    summary subs))


;; ---------------------------------------------------------------------------
;; Composition: mobile nav panel from pre-computed category data
;; ---------------------------------------------------------------------------

(defcomp ~navigation/mobile-nav-from-data (&key (categories :as list) (all-href :as string) (all-active :as boolean) (hx-select :as string) (select-colours :as string))
  (~navigation/mobile-nav-wrapper :items
    (<>
      (~navigation/mobile-all-link :href all-href :hx-select hx-select
         :active all-active :select-colours select-colours)
      (map (lambda (cat)
        (~navigation/mobile-cat-details
          :open (get cat "active")
          :summary (~navigation/mobile-cat-summary
            :bg-cls (if (get cat "active") " bg-stone-900 text-white hover:bg-stone-900" "")
            :href (get cat "href") :hx-select hx-select
            :select-colours select-colours :cat-name (get cat "name")
            :count-label (str (get cat "count") " products")
            :count-str (str (get cat "count"))
            :chevron (~navigation/mobile-chevron))
          :subs (if (get cat "subs")
            (~navigation/mobile-subs-panel :links
              (<> (map (lambda (sub)
                (~navigation/mobile-sub-link
                  :select-colours select-colours
                  :active (get sub "active")
                  :href (get sub "href") :hx-select hx-select
                  :label (get sub "label")
                  :count-label (str (get sub "count") " products")
                  :count-str (str (get sub "count"))))
                (get cat "subs"))))
            (~navigation/mobile-view-all :href (get cat "href") :hx-select hx-select))))
        categories))))