;; 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))
