(ns auto-ap.ssr.components.link-dropdown 
  (:require [auto-ap.ssr.components :as com]
            [auto-ap.ssr.hx :as hx]
            [auto-ap.ssr.svg :as svg]))

(defn link-dropdown [links]
  (when (> (count links) 0)
    [:div  {:x-data (hx/json {})}

     (com/a-icon-button {:class "relative"
                         "@click.prevent" "$tooltip($refs.tooltip, {content: ()=>$refs.tooltip.innerHTML, theme: 'light', allowHTML: true, interactive:true, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}})"
                         }
                        svg/paperclip
                        (com/badge {:color "blue"} (count links)))
     [:template {:x-ref "tooltip"}
      [:div.divide-y.divide-gray-200
       [:div {:class "p-2 overflow-y-auto text-sm text-gray-700 dark:text-gray-200"}
        [:div.flex.flex-col.gap-y-2 {:class "max-w-[24em]"}
         (for [l links]
           [:div.flex-initial
            [:a {:href (:link l) :target "_blank"}
             (com/pill {:color (or (:color l) :primary) :class "truncate block shrink grow-0"}
                       (:content l))]])]]]]]))