(ns auto-ap.ssr.components.inputs
  (:require
   [hiccup2.core :as hiccup]))


(defn select- [params & children]
  (into 
    [:select (-> params
                 (dissoc :allow-blank? :value :options)
                 (update 
                   :class str  " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
                 
                 )
     (cond->> 
         (map (fn [[k v]]
                [:option {:value k :selected (= k (:value params))} v])
              (:options params))
       (:allow-blank? params) (conj [:option {:value "" :selected (not (:value params))} ""]))]
    children))

(defn typeahead- [params]
  [:select (-> params
               (dissoc :url)
               (dissoc :value)
               )
   (for [[k v] (if (:multiple params)
                 (:value params)
                 [(:value params)])
         :when k]
     [:option {:value k :selected true} v]
     )
   
   [:script {:lang "javascript"}
    (hiccup/raw (format "
(function () {
var element = document.getElementById('%s');
var c = new Choices(element, {removeItems: true, removeItemButton:true, searchFloor: 3, searchPlaceholderValue: '%s'});

element.addEventListener('search', function (e) {
    let data = fetch('%s?q=' + e.detail.value)
    .then(res => res.json())
    .then(data => {
      c.setChoices(data, 'value', 'label', true)
    });
});
element.addEventListener('choice', function (e) {
c.clearChoices();
    })
})();

"
                        (:id params)
                        (:placeholder params)
                        (:url params)
                        ))]])


(defn use-size [size]
  (if (= :small size)
    (str " " "text-xs p-2")
    (str " " "text-sm p-2.25")))
(defn text-input- [{:keys [size] :as params}]
  [:input 
   (-> params 
       (update  
         :class str " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
       (update :class #(str % (use-size size)))
       )
   ])

(defn money-input- [{:keys [size] :as params}]
  [:input 
   (->  params
        (update
          :class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-right appearance-none"
          )
        (update :class #(str % (use-size size)))
        (assoc :type "number"
               :step "0.01")
        (dissoc :size))
   ])

(defn date-input- [{:keys [size] :as params}]
  [:div 
   [:input 
    (->  params
         (update
           :class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
         (assoc :type "text")
         (assoc "_" (hiccup/raw "init initDatepicker(me)"))
         (assoc "hx-on" (hiccup/raw "changeDate: htmx.trigger(this, \"change\")
                                     htmx:beforeCleanupElement: this.dp.destroy()"))
         (update :class #(str % (use-size size)))
         (dissoc :size))]])

(defn field- [params & rest]
  (into 
    [:div {:id (:id params)}
     [:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)]]
    rest))