(ns article.core
  (:require
   [goog.string :as gstring]
   [reagent.core :as reagent :refer [atom]]
   [reagent.dom :as rdom]))

(defn log-clj! [obj]
  (.log js/console (.stringify js/JSON (clj->js obj))))

(defn log! [obj]
  (.log js/console (.stringify js/JSON obj)))

(def items [
            {
             :id "Article 1"
             :title "My article 1"
             :summary "Summary of article 1"
             :display "none"
             }
            {
             :id "Article 2"
             :title "My article 2"
             :summary "Summary of article 2"
             :display "none"
             }
            {
             :id "Article 3"
             :title "My article 3"
             :summary "Summary of article 3"
             :display "none"
             }
            {
             :id "Article 4"
             :title "My article 4"
             :summary "Summary of article 4"
             :display "none"
             }
            ])

(defn article-item [{:keys [article onClickToggle onClickRemove]}]
  [:li
   [:a {
        :href (str "#" (:id article))
        :title "Toggle Summary"
        :on-click #(onClickToggle (:id article))
        }
    (:title article)
    ]
   (gstring/unescapeEntities " ")
   [:a {
        :href (str "#" (:id article))
        :title "Toggle Summary"
        :on-click #(onClickRemove (:id article))
        }
    \u2717
    ]
   [:p {:style {:display (:display article)}} (:summary article)]])

(defn article-list [{:keys [articles onClickToggle onClickRemove]}]
  [:ul
   (for [article articles]
     ^{:key (:id article)} [article-item {
                                           :article article
                                           :onClickToggle onClickToggle
                                           :onClickRemove onClickRemove
                                          }])
   ]
  )

(defn add-article [{:keys [name
                           title
                           summary
                           onChangeTitle
                           onChangeSummary
                           onClickAdd]}]
  [:section
   [:h1 name]
   [:input {
            :placehold "Title"
            :default-value title
            :on-change onChangeTitle
            }]
   [:input {
            :placehold "Summary"
            :default-value summary
            :on-change onChangeSummary
            }]
   [:button {:on-click onClickAdd} "Add"]])


(defn my-feature []
  (let [articles (reagent/atom items)
        title (reagent/atom "")
        summary (reagent/atom "")
        ids (reagent/atom (count items))
        onClickAdd (fn []
                     (swap! ids inc)
                     (swap! articles #(conj % {:id (str "Article " @ids)
                                               :title @title
                                               :summary @summary
                                               :display "none"}))
                     )
        onChangeSummary #(reset! summary (-> % .-target .-value))
        onClickRemove   (fn [id]
                          (log! id)
                          (swap! articles (fn [a] (filter #(not= id (:id %)) a)))
                          )
        onChangeTitle   #(reset! title (-> % .-target .-value))]
        (fn []
          [:section
           [add-article  {
                          :title @title
                          :summary @summary
                          :name "Articles"
                          :onClickAdd onClickAdd
                          :onChangeSummary onChangeSummary
                          :onChangeTitle onChangeTitle
                          }]
           [article-list {:articles @articles :onClickRemove onClickRemove}]])))

  (defn app []
    [:div
     [my-feature {:articles items}]])

  (defn mount-root []
    (rdom/render [app] (.getElementById js/document "app")))

  (defn init! []
    (mount-root))

  (defn ^:dev/after-load reload! []
    (mount-root))