;; Market filter components

(defcomp ~market-filter-sort-item (&key href hx-select ring-cls src label)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
    (img :src src :alt label :class "w-10 h-10")
    (span :class "text-xs" label)))

(defcomp ~market-filter-sort-row (&key items)
  (div :class "flex flex-row gap-2 justify-center p-1"
    items))

(defcomp ~market-filter-like (&key href hx-select icon-cls size-cls)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class "flex flex-col items-center gap-1 p-1 cursor-pointer"
    (i :aria-hidden "true" :class (str icon-cls " " size-cls " leading-none"))))

(defcomp ~market-filter-label-item (&key href hx-select ring-cls src name)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
    (img :src src :alt name :class "w-10 h-10")))

(defcomp ~market-filter-sticker-item (&key href hx-select ring-cls src name count-cls count)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
    (img :src src :alt name :class "w-6 h-6")
    (span :class count-cls count)))

(defcomp ~market-filter-stickers-row (&key items)
  (div :class "flex flex-wrap gap-2 justify-center p-1"
    items))

(defcomp ~market-filter-brand-item (&key href hx-select bg-cls name-cls name count)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class (str "flex flex-row items-center gap-2 px-2 py-1 rounded hover:bg-stone-100" bg-cls)
    (div :class name-cls name) (div :class name-cls count)))

(defcomp ~market-filter-brands-panel (&key items)
  (div :class "space-y-1 p-2"
    items))

(defcomp ~market-filter-category-label (&key label)
  (div :class "mb-4" (div :class "text-2xl uppercase tracking-wide text-black-500" label)))

(defcomp ~market-filter-like-labels-nav (&key content inner)
  (nav :aria-label "like" :class "flex flex-row justify-center w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-1"
    (if content content (when inner inner))))

(defcomp ~market-desktop-category-summary (&key content inner)
  (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"
    (if content content (when inner inner))))

(defcomp ~market-desktop-brand-summary (&key inner)
  (div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML" inner))

(defcomp ~market-filter-subcategory-item (&key href hx-select active-cls name)
  (a :href href :sx-get href :sx-target "#main-panel"
     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
     :class (str "block px-2 py-1 rounded hover:bg-stone-100" active-cls)
     name))

(defcomp ~market-filter-subcategory-panel (&key items)
  (div :class "mt-4 space-y-1" items))

(defcomp ~market-mobile-clear-filters (&key href hx-select)
  (div :class "flex flex-row justify-center"
    (a :href href :sx-get href :sx-target "#main-panel"
       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
       :role "button" :title "clear filters" :aria-label "clear filters"
       :class "flex flex-col items-center justify-start p-1 rounded bg-stone-200 text-black cursor-pointer"
      (span :class "mt-1 leading-none tabular-nums" "clear filters"))))

(defcomp ~market-mobile-like-labels-row (&key inner)
  (div :class "flex flex-row gap-2 justify-center items-center" inner))

(defcomp ~market-mobile-filter-summary (&key search-bar chips filter)
  (details :class "md:hidden group" :id "/filter"
    (summary :class "cursor-pointer select-none" :id "filter-summary-mobile"
      search-bar
      (div :class "col-span-12 min-w-0 grid grid-cols-1 gap-1 bg-gray-100 px-2" :role "list"
        chips))
    (div :id "filter-details-mobile" :style "display:contents"
      filter)))

(defcomp ~market-mobile-chips-row (&key inner)
  (div :class "flex flex-row items-start gap-2" inner))

(defcomp ~market-mobile-chip-sort (&key src label)
  (ul :class "relative inline-flex items-center justify-center gap-2"
    (li :role "listitem" (img :src src :alt label :class "w-10 h-10"))))

(defcomp ~market-mobile-chip-liked-icon ()
  (i :aria-hidden "true" :class "fa-solid fa-heart text-red-500 text-[40px] leading-none"))

(defcomp ~market-mobile-chip-count (&key cls count)
  (div :class (str cls " mt-1 leading-none tabular-nums") count))

(defcomp ~market-mobile-chip-liked (&key inner)
  (div :class "flex flex-col items-center gap-1 pb-1" inner))

(defcomp ~market-mobile-chip-image (&key src name)
  (img :src src :alt name :class "w-10 h-10"))

(defcomp ~market-mobile-chip-item (&key inner)
  (li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" inner))

(defcomp ~market-mobile-chip-list (&key items)
  (ul :class "relative inline-flex items-center justify-center gap-2" items))

(defcomp ~market-mobile-chip-brand (&key name count)
  (li :role "listitem" :class "flex flex-row items-center gap-2"
    (div :class "text-md" name) (div :class "text-md" count)))

(defcomp ~market-mobile-chip-brand-zero (&key name)
  (li :role "listitem" :class "flex flex-row items-center gap-2"
    (div :class "text-md text-red-500" name) (div :class "text-xl text-red-500" "0")))

(defcomp ~market-mobile-chip-brand-list (&key items)
  (ul items))


;; ---------------------------------------------------------------------------
;; Composition defcomps — receive data, compose filter component trees
;; ---------------------------------------------------------------------------

;; Sort option stickers from data
(defcomp ~market-filter-sort-from-data (&key items)
  (~market-filter-sort-row :items
    (<> (map (lambda (s)
      (~market-filter-sort-item
        :href (get s "href") :hx-select (get s "hx-select")
        :ring-cls (get s "ring-cls") :src (get s "src") :label (get s "label")))
      items))))

;; Like filter from data
(defcomp ~market-filter-like-from-data (&key href hx-select liked mobile)
  (~market-filter-like
    :href href :hx-select hx-select
    :icon-cls (if liked "fa-solid fa-heart text-red-500" "fa-regular fa-heart text-stone-400")
    :size-cls (if mobile "text-[40px]" "text-2xl")))

;; Label filter items from data
(defcomp ~market-filter-labels-from-data (&key items hx-select)
  (<> (map (lambda (lb)
    (~market-filter-label-item
      :href (get lb "href") :hx-select hx-select
      :ring-cls (get lb "ring-cls") :src (get lb "src") :name (get lb "name")))
    items)))

;; Sticker filter items from data
(defcomp ~market-filter-stickers-from-data (&key items hx-select)
  (~market-filter-stickers-row :items
    (<> (map (lambda (st)
      (~market-filter-sticker-item
        :href (get st "href") :hx-select hx-select
        :ring-cls (get st "ring-cls") :src (get st "src") :name (get st "name")
        :count-cls (get st "count-cls") :count (get st "count")))
      items))))

;; Brand filter items from data
(defcomp ~market-filter-brands-from-data (&key items hx-select)
  (~market-filter-brands-panel :items
    (<> (map (lambda (br)
      (~market-filter-brand-item
        :href (get br "href") :hx-select hx-select
        :bg-cls (get br "bg-cls") :name-cls (get br "name-cls")
        :name (get br "name") :count (get br "count")))
      items))))

;; Subcategory selector from data
(defcomp ~market-filter-subcategories-from-data (&key items hx-select all-href current-sub)
  (~market-filter-subcategory-panel :items
    (<>
      (~market-filter-subcategory-item
        :href all-href :hx-select hx-select
        :active-cls (if (not current-sub) " bg-stone-200 font-medium" "")
        :name "All")
      (map (lambda (sub)
        (~market-filter-subcategory-item
          :href (get sub "href") :hx-select hx-select
          :active-cls (get sub "active-cls") :name (get sub "name")))
        items))))

;; Desktop filter panel from data
(defcomp ~market-desktop-filter-from-data (&key search-sx category-label
                                                sort-data like-data label-data
                                                sticker-data brand-data sub-data hx-select)
  (<>
    search-sx
    (~market-desktop-category-summary :inner
      (<>
        (~market-filter-category-label :label category-label)
        (when sort-data (~market-filter-sort-from-data :items sort-data))
        (~market-filter-like-labels-nav :inner
          (<>
            (~market-filter-like-from-data
              :href (get like-data "href") :hx-select hx-select
              :liked (get like-data "liked") :mobile false)
            (when label-data
              (~market-filter-labels-from-data :items label-data :hx-select hx-select))))
        (when sticker-data
          (~market-filter-stickers-from-data :items sticker-data :hx-select hx-select))
        (when sub-data
          (~market-filter-subcategories-from-data
            :items (get sub-data "items") :hx-select hx-select
            :all-href (get sub-data "all-href")
            :current-sub (get sub-data "current-sub")))))
    (~market-desktop-brand-summary
      :inner (when brand-data
        (~market-filter-brands-from-data :items brand-data :hx-select hx-select)))))

;; Mobile filter chips from active filter data
(defcomp ~market-mobile-chips-from-data (&key sort-chip liked-chip label-chips sticker-chips brand-chips)
  (~market-mobile-chips-row :inner
    (<>
      (when sort-chip
        (~market-mobile-chip-sort :src (get sort-chip "src") :label (get sort-chip "label")))
      (when liked-chip
        (~market-mobile-chip-liked :inner
          (<>
            (~market-mobile-chip-liked-icon)
            (when (get liked-chip "count")
              (~market-mobile-chip-count
                :cls (get liked-chip "count-cls") :count (get liked-chip "count"))))))
      (when label-chips
        (~market-mobile-chip-list :items
          (<> (map (lambda (lc)
            (~market-mobile-chip-item :inner
              (<>
                (~market-mobile-chip-image :src (get lc "src") :name (get lc "name"))
                (when (get lc "count")
                  (~market-mobile-chip-count :cls (get lc "count-cls") :count (get lc "count"))))))
            label-chips))))
      (when sticker-chips
        (~market-mobile-chip-list :items
          (<> (map (lambda (sc)
            (~market-mobile-chip-item :inner
              (<>
                (~market-mobile-chip-image :src (get sc "src") :name (get sc "name"))
                (when (get sc "count")
                  (~market-mobile-chip-count :cls (get sc "count-cls") :count (get sc "count"))))))
            sticker-chips))))
      (when brand-chips
        (~market-mobile-chip-brand-list :items
          (<> (map (lambda (bc)
            (if (get bc "has-count")
              (~market-mobile-chip-brand :name (get bc "name") :count (get bc "count"))
              (~market-mobile-chip-brand-zero :name (get bc "name"))))
            brand-chips)))))))

;; Mobile filter content (expanded panel) from data
(defcomp ~market-mobile-filter-content-from-data (&key sort-data like-data label-data
                                                       sticker-data brand-data clear-href hx-select)
  (<>
    (when sort-data (~market-filter-sort-from-data :items sort-data))
    (when clear-href
      (~market-mobile-clear-filters :href clear-href :hx-select hx-select))
    (~market-mobile-like-labels-row :inner
      (<>
        (~market-filter-like-from-data
          :href (get like-data "href") :hx-select hx-select
          :liked (get like-data "liked") :mobile true)
        (when label-data
          (~market-filter-labels-from-data :items label-data :hx-select hx-select))))
    (when sticker-data
      (~market-filter-stickers-from-data :items sticker-data :hx-select hx-select))
    (when brand-data
      (~market-filter-brands-from-data :items brand-data :hx-select hx-select))))
