 
 (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

  [:div.pure-g
   [:div.pure-u "Movements belong to "
    [:span {:style {:color "red"}} (count (:parts @template-state))] " parts."]
   [:button.pure-u
    {:on-click #(swap! template-state update-in [:parts]
                       conj {:title    ""
                             :categories []
                             :n        0
                             :specific-movements []})} "+"]
   [:button.pure-u
    {:on-click #(when (> (count (:parts @template-state)) 0)
                 (swap! template-state update-in [:parts] pop))} "-"]])

(defn save-template-component [error-atom]
  [:div.pure-g
   [:button.pure-button
    {:on-click #(do
                 (swap! template-state assoc :user (session/get :user))
                 (let [title (:title @template-state)
                       parts (:parts @template-state)]
                   (cond
                     (nil? title) (reset! error-atom "The template needs a title.")
                     (empty? parts) (reset! error-atom "A session must have 1 or more parts.")
                     :else (print @template-state)
                     #_(POST "template"
                             {:params        @template-state
                              :handler       (fn [response] (print response))
                              :error-handler (fn [response] (reset! error-atom (:response response)))}))))}
    "Save"]])

(defn template-creator-component []
  (let [error (atom "")]
    (fn []
      [:div#layout {:class (str "" (when (session/get :active?) "active"))}
       [menu-component]
       [:div.content {:style {:background-image (str "url(" (:background @template-state) ")")}}
        (heading-component)
        (error-component error)
        (upload-background-component)
        (title-component)
        (description-component)
        (adjust-parts-component)
