(ns pocketbook.example
  "Example: a simple todo app using Pocketbook."
  (:require [pocketbook.core :as pb]
            [cljs.core.async :refer [go <!]]))

(defn- render-todos! [todos-atom]
  (let [todos @todos-atom
        container (js/document.getElementById "app")]
    (set! (.-innerHTML container)
      (str "<h1>Pocketbook Todos (" (count todos) ")</h1>"
           "<div id='add-form'>"
           "<input id='new-todo' type='text' placeholder='New todo...' />"
           "<button id='add-btn'>Add</button>"
           "</div>"
           "<ul>"
           (apply str
             (for [[id doc] (sort-by key todos)]
               (str "<li>"
                    "<label>"
                    "<input type='checkbox' data-id='" id "' "
                    (when (:done doc) "checked") " /> "
                    "<span" (when (:done doc) " style='text-decoration:line-through'") ">"
                    (:text doc)
                    "</span>"
                    "</label>"
                    " <button class='del-btn' data-id='" id "'>✕</button>"
                    "</li>")))
           "</ul>"
           "<p style='color:#888;font-size:12px'>"
           "Pending sync: " (pb/pending-count todos-atom)
           "</p>"))))

(defn- setup-handlers! [todos-atom]
  ;; We re-setup after each render
  (when-let [btn (js/document.getElementById "add-btn")]
    (.addEventListener btn "click"
      (fn [_]
        (let [input (js/document.getElementById "new-todo")
              text  (.-value input)]
          (when (seq text)
            (let [id (str "todo:" (random-uuid))]
              (swap! todos-atom assoc id {:text text :done false})
              (set! (.-value input) "")))))))
  ;; Checkbox toggles
  (doseq [cb (array-seq (.querySelectorAll js/document "input[type=checkbox]"))]
    (.addEventListener cb "change"
      (fn [e]
        (let [id (.-id (.-dataset (.-target e)))]
          (swap! todos-atom update-in [id :done] not)))))
  ;; Delete buttons
  (doseq [btn (array-seq (.querySelectorAll js/document ".del-btn"))]
    (.addEventListener btn "click"
      (fn [e]
        (let [id (.-id (.-dataset (.-target e)))]
          (swap! todos-atom dissoc id))))))

(defn ^:export init []
  (go
    (let [conn   (<! (pb/open "pocketbook-example"))
          todos  (pb/synced-atom conn "todo"
                   {:server "http://localhost:8090/sync"})]
      ;; Wait for initial load
      (<! (pb/ready? todos))
      ;; Render
      (render-todos! todos)
      (setup-handlers! todos)
      ;; Re-render on changes
      (add-watch todos :render
        (fn [_ _ _ _]
          (render-todos! todos)
          (setup-handlers! todos)))
      (js/console.log "Pocketbook example loaded!" (count @todos) "todos"))))

;; Auto-init
(init)