(ns todo.views.todo-item
  (:require [reagent.core :as r]
            ["react-native" :as rn]
            ["react-native-gesture-handler" :refer [Swipeable]]
            [re-frame.core :as rf]
            [todo.theme :as theme]))

(defn render-right-actions [id]
  (fn [_progress _drag-x]
    (r/as-element
      [:> rn/TouchableOpacity
       {:on-press #(rf/dispatch [:delete-todo id])
        :style {:background-color (:error theme/colors)
                :justify-content "center"
                :align-items "center"
                :width 80
                :border-radius 12
                :margin-vertical 4
                :margin-right 16}}
       [:> rn/Text {:style {:color "#FFFFFF" :font-weight "bold" :font-size 14}} "Delete"]])))

(defn todo-item [{:keys [id title completed category priority]}]
  [:> Swipeable {:render-right-actions (render-right-actions id)
                 :overshoot-right false}
   [:> rn/TouchableOpacity
    {:on-press #(rf/dispatch [:show-edit-form {:id id :title title :completed completed
                                               :category category :priority priority}])
     :active-opacity 0.7
     :style {:flex-direction "row"
             :align-items "center"
             :background-color (if completed (:completed-bg theme/colors) (:surface theme/colors))
             :margin-horizontal 16
             :margin-vertical 4
             :padding 16
             :border-radius 12
             :elevation 2
             :shadow-color "#000"
             :shadow-offset {:width 0 :height 1}
             :shadow-opacity 0.1
             :shadow-radius 2}}

    [:> rn/TouchableOpacity
     {:on-press #(rf/dispatch [:toggle-todo id])
      :style {:width 28 :height 28 :border-radius 14
              :border-width 2
              :border-color (if completed (:primary theme/colors) (:border theme/colors))
              :background-color (if completed (:primary theme/colors) "transparent")
              :justify-content "center" :align-items "center"
              :margin-right 12}}
     (when completed
       [:> rn/Text {:style {:color "#FFFFFF" :font-size 16}} "\u2713"])]

    [:> rn/View {:style {:flex 1}}
     [:> rn/Text {:style {:font-size 16
                          :color (if completed (:completed-text theme/colors) (:on-surface theme/colors))
                          :text-decoration-line (if completed "line-through" "none")}}
      title]
     [:> rn/View {:style {:flex-direction "row" :align-items "center" :margin-top 4 :gap 8}}
      [:> rn/View {:style {:background-color (:border theme/colors)
                           :padding-horizontal 8 :padding-vertical 2
                           :border-radius 10}}
       [:> rn/Text {:style {:font-size 12 :color (:text-secondary theme/colors)}} category]]
      [:> rn/View {:style {:width 10 :height 10 :border-radius 5
                           :background-color (get theme/priority-colors priority "#999")}}]]]]])
