(ns todo.views.category-picker
  (:require [reagent.core :as r]
            ["react-native" :as rn]
            [todo.db :as db]
            [todo.theme :as theme]))

(defn category-picker [selected on-select]
  [:> rn/View {:style {:flex-direction "row" :flex-wrap "wrap" :gap 8 :margin-vertical 8}}
   (for [cat db/categories]
     ^{:key cat}
     [:> rn/TouchableOpacity
      {:on-press #(on-select cat)
       :style {:padding-horizontal 16
               :padding-vertical 8
               :border-radius 20
               :background-color (if (= cat selected)
                                   (:primary theme/colors)
                                   (:border theme/colors))}}
      [:> rn/Text {:style {:color (if (= cat selected)
                                    (:on-primary theme/colors)
                                    (:on-surface theme/colors))
                           :font-size 14}}
       cat]])])

(defn priority-picker [selected on-select]
  [:> rn/View {:style {:flex-direction "row" :gap 8 :margin-vertical 8}}
   (for [{:keys [key label color]} db/priorities]
     ^{:key key}
     [:> rn/TouchableOpacity
      {:on-press #(on-select key)
       :style {:padding-horizontal 16
               :padding-vertical 8
               :border-radius 20
               :border-width 2
               :border-color color
               :background-color (if (= key selected) color "transparent")}}
      [:> rn/Text {:style {:color (if (= key selected) "#FFFFFF" color)
                           :font-weight "600"
                           :font-size 14}}
       label]])])
