             [salava.user.ui.helper :refer [profile-picture]]
             [reagent-modals.modals :as m]
             [salava.core.ui.layout :as layout]
-            [salava.core.ui.error :as err]))
+            [salava.core.ui.error :as err]
+            [salava.core.ui.grid :as g]))
 
 
 (defn endorsement-row [endorsement]

                  (when reload-fn (reload-fn state))))}))


(defn process-text [s state]
  (let [text (-> js/document
                 (.getElementById (str "editor" (-> (session/get :user) :id)))
                 (.-innerHTML))
        endorsement-claim (str text (if (blank? text) "" "\n\n") "* " s)]
    (prn text)
    (reset! (cursor state [:endorsement-comment]) endorsement-claim)))

(def simplemde-toolbar (array "bold" "italic" "heading-3"
                              "quote" "unordered-list" "ordered-list"
                              "link" "horizontal-rule"
                              "preview"))

(defn init-editor [atom element-id]
  (let [editor (js/SimpleMDE. (js-obj "element" (.getElementById js/document element-id)
                                      "toolbar" simplemde-toolbar
                                      "autosave" "true"
                                      "forceSync" "true"))]
    (js/setTimeout (.refresh editor) 10)
    (js/setTimeout (fn [] (.value editor @atom)) 500) ;;delay for editor to load
    (.codemirror.on editor "change" (fn [] (reset! atom (.value editor))))
    (.codemirror.on editor "mousedown" (fn [] (.value editor @atom)))))

(defn markdown-editor [atom]
  (create-class {:component-did-mount #(init-editor atom (str "editor" (-> (session/get :user) :id)))
                 :reagent-render (fn []
                                   [:div.form-group
                                    [:textarea {:class "form-control"
                                                :id (str "editor" (-> (session/get :user) :id))
                                                :value @atom
                                                :on-change #(reset! atom (.-target.value %))
                                                }]])}))

(defn endorse-badge-content [state]
  (fn []
    [:div {:style {:display @(cursor state [:show-content])}}
     [:hr]

                         :show-content "none"
                         :show-endorsement-status "block")))}))

(defn user-badge-endorsement-content [badge-id badge-endorsements]
  (let [state (atom {:id badge-id})]
    (init-user-badge-endorsement state)
    (fn []
      (let [endorsements (:user-badge-endorsements @state)
            badge-endorsements? (pos? (count @badge-endorsements))]
        (when (seq endorsements)
          [:div;.row {:id "badge-contents"}
           ;[:div.col-xs-12
           ;[:h4 {:style {:margin-bottom "20px"}} (t :badge/BadgeEndorsedBy)]
           (if badge-endorsements? [:hr.line])
           [:h4 {:style {:margin-bottom "20px"}} (t :badge/BadgeEndorsedByIndividuals)]
           (reduce (fn [r endorsement]
                     (let [{:keys [id user_badge_id image_file name content first_name last_name profile_picture endorser_id mtime]} endorsement]
                       (conj r [:div {:style {:margin-bottom "20px"}}

                                [:h5
                                 [:img {:src (profile-picture profile_picture) :style {:width "55px" :height "auto" :padding "7px"}}]
                                 [:a {:href "#"
                                      :on-click #(do (.preventDefault %) (mo/set-new-view [:user :profile] {:user-id endorser_id}))
                                      } (str first_name " " last_name)]
