(ns todo.views.add-todo
  (:require [clojure.string :as str]
            [reagent.core :as r]
            ["react-native" :as rn]
            [re-frame.core :as rf]
            [todo.theme :as theme]
            [todo.views.category-picker :as picker]))

(defn add-todo-form []
  (let [editing @(rf/subscribe [:editing-todo])
        title (r/atom (or (:title editing) ""))
        category (r/atom (or (:category editing) "Personal"))
        priority (r/atom (or (:priority editing) :medium))]
    (fn []
      [:> rn/View {:style {:position "absolute" :top 0 :left 0 :right 0 :bottom 0
                           :background-color "rgba(0,0,0,0.5)"
                           :justify-content "center"
                           :padding 24}}
       [:> rn/View {:style {:background-color (:surface theme/colors)
                            :border-radius 16
                            :padding 24
                            :elevation 8}}
        [:> rn/Text {:style {:font-size 20 :font-weight "bold" :margin-bottom 16
                             :color (:on-surface theme/colors)}}
         (if editing "Edit Todo" "Add New Todo")]

        [:> rn/TextInput
         {:style {:border-width 1 :border-color (:border theme/colors)
                  :border-radius 8 :padding 12 :font-size 16
                  :margin-bottom 16}
          :placeholder "What needs to be done?"
          :placeholder-text-color (:text-secondary theme/colors)
          :value @title
          :on-change-text #(reset! title %)
          :auto-focus true}]

        [:> rn/Text {:style {:font-size 14 :font-weight "600" :color (:text-secondary theme/colors)
                             :margin-bottom 4}}
         "Category"]
        [picker/category-picker @category #(reset! category %)]

        [:> rn/Text {:style {:font-size 14 :font-weight "600" :color (:text-secondary theme/colors)
                             :margin-bottom 4 :margin-top 8}}
         "Priority"]
        [picker/priority-picker @priority #(reset! priority %)]

        [:> rn/View {:style {:flex-direction "row" :justify-content "flex-end"
                             :gap 12 :margin-top 24}}
         [:> rn/TouchableOpacity
          {:on-press #(rf/dispatch [:hide-form])
           :style {:padding-horizontal 20 :padding-vertical 10
                   :border-radius 8}}
          [:> rn/Text {:style {:color (:text-secondary theme/colors) :font-size 16}} "Cancel"]]

         [:> rn/TouchableOpacity
          {:on-press (fn []
                       (when (seq (str/trim @title))
                         (if editing
                           (rf/dispatch [:update-todo (:id editing) @title @category @priority])
                           (rf/dispatch [:add-todo @title @category @priority]))))
           :style {:padding-horizontal 20 :padding-vertical 10
                   :border-radius 8
                   :background-color (:primary theme/colors)}}
          [:> rn/Text {:style {:color (:on-primary theme/colors) :font-size 16 :font-weight "600"}}
           (if editing "Save" "Add")]]]]])))
