 
 (def template-state (atom {:parts []}))
 
-(defn movement-component [title image]
-  [:div.pure-u.movement
-   [:div.pure-g
-    [:div.pure-u.refresh {:on-click #()}]
-    [:h3.pure-u.title title]
-    [:div.pure-u.destroy {:on-click #()}]]
-   [:img.graphic.pure-img-responsive {:src image}]
-   [:div.pure-g
-    [:div.pure-u 10]
+(defn preview-file []
+  (let [file (.getElementById js/document "upload")
+        reader (js/FileReader.)]
+    (when-let [file (aget (.-files file) 0)]
+      (set! (.-onloadend reader) #(swap! template-state assoc :background (-> % .-target .-result)))
+      (.readAsDataURL reader file))))
+
+(defn movement-component
+  ([data title image] (movement-component data title image nil))
+  ([{:keys [reps sets distance duration i]} title image m]
+    [:div.pure-u.movement
+     [:div.pure-g
+      [:div.pure-u.refresh {:on-click #()}]
+      [:h3.pure-u.title title]
+      [:div.pure-u.destroy {:on-click #(when (and (not (nil? m)) (not (nil? i)))
+                                        (let [movements (vec (remove #{m} (get-in @template-state [:parts i :specific-movements])))]
+                                          (swap! template-state assoc-in [:parts i :specific-movements] movements)))}]]
+     [:img.graphic.pure-img-responsive {:src image}]
+     [:div.pure-g
+      [:div.pure-u-1-4 reps]
+      [:div.pure-u-3-4 "reps"]]
+     [:div.pure-g
+      [:div.pure-u-1-4 sets]
+      [:div.pure-u-3-4 "set"]]
+     [:div.pure-g
+      [:div.pure-u-1-4 distance]
+      [:div.pure-u-3-4 "meters"]]
+     [:div.pure-g
+      [:div.pure-u-1-4 duration]
+      [:div.pure-u-3-4 "seconds"]]]))
+
+(defn rep-set-distance-duration-component [i]
+  [:div
+   [:div.pure-g
+    [:label.pure-u "These movements should be done for: "]]
+   [:div.pure-g
+    [:div.pure-u [:input {:type "text"
+                          :value (get-in @template-state [:parts i :reps])
+                          :placeholder "nil"
+                          :on-change   #(swap! template-state assoc-in [:parts i :reps] (-> % .-target .-value))}]]
     [:div.pure-u "reps"]]
    [:div.pure-g
-    [:div.pure-u 3]
-    [:div.pure-u "set"]]
-   [:div.pure-g
-    [:div.pure-u "-"]
+    [:div.pure-u [:input {:type "text"
+                          :value (get-in @template-state [:parts i :sets])
+                          :placeholder "nil"
+                          :on-change #(swap! template-state assoc-in [:parts i :sets] (-> % .-target .-value))}]]
+    [:div.pure-u "sets"]]
+   [:div.pure-g
+    [:div.pure-u [:input {:type "text"
+                          :value (get-in @template-state [:parts i :distance])
+                          :placeholder "nil"
+                          :on-change #(swap! template-state assoc-in [:parts i :distance] (-> % .-target .-value))}]]
     [:div.pure-u "meters"]]
    [:div.pure-g
-    [:div.pure-u "-"]
+    [:div.pure-u [:input {:type "text"
+                          :value (get-in @template-state [:parts i :duration])
+                          :placeholder "nil"
+                          :on-change #(swap! template-state assoc-in [:parts i :duration] (-> % .-target .-value))}]]
     [:div.pure-u "seconds"]]])
 
 (defn part-creator-component []

      [:div
       [:div.pure-g
        [:h2.pure-u [:input {:type        "text"
                             :placeholder "\"warmup\", \"repeat for 3 rounds\" "
                             :on-change   #(swap! template-state assoc-in [:parts i :title] (-> % .-target .-value))
                             :value       (get-in @template-state [:parts i :title])}]]]

       [:div.pure-g
        (for [m (get-in @template-state [:parts i :specific-movements])]
          ^{:key (str m (rand-int 1000))} [:div {:on-click #(let [movements (vec (remove #{m} (get-in @template-state [:parts i :specific-movements])))]
                                       (swap! template-state assoc-in [:parts i :specific-movements] movements))}
                     (movement-component (str m) (str "images/" (str/replace (str/lower-case m) " " "-") ".png"))])
        (for [n (range (get-in @template-state [:parts i :n]))]
          ^{:key (str n (rand-int 1000))} (movement-component "movement name" "images/push-up.png"))]


       [:div.pure-g

                                                                    (str "#" id)
                                                                    (vec (session/get :all-movements)))})]
           [movements-ac-comp {:id      (str "mtags" i)
                               :class   "edit" :placeholder "type to find and add movement.."
                               :on-save #(when (and (some #{%} (session/get :all-movements))
                                                    (not (some #{%} (get-in @template-state [:parts i :specific-movements]))))
                                          (swap! template-state update-in [:parts i :specific-movements] conj %))}])]]

       (rep-set-distance-duration-component i)
       ])))



(defn upload-background-component []
  [:div.pure-g
   [:div.pure-u "Upload a custom background image for your template: "]
   [:input.pure-u {:id "upload"
            :type "file" :on-change #(preview-file)}]
   (when (:background @template-state)
     [:div.pure-u {:on-click #(swap! template-state dissoc :background)
            :style    {:color "blue"}} "Remove custom background"])])

(defn title-component []
  [:div.pure-g
   [:h1.pure-u
    [:input {:type        "text"
             :placeholder "Your Template Title"
             :on-change   #(swap! template-state assoc :title (-> % .-target .-value))
             :value       (:title @template-state)}]]])

