(ns myapp.scratch-ws
  (:require

    ["@material-ui/core" :as mui]
    [nubank.workspaces.core :as ws]
    [nubank.workspaces.card-types.fulcro :as ct.fulcro]
    [nubank.workspaces.lib.fulcro-portal :as f.portal]

    [fulcro.client.localized-dom :as dom]
    [fulcro.client.mutations :as fm :refer [defmutation]]
    [fulcro.client.cards :refer [defcard-fulcro]]
    [fulcro.client.primitives :as fp :refer [defsc]]

    ))


;; --- utilities ---
(defn factory-apply
  [class]
  (fn [props & children]
    (apply js/React.createElement
      class
      (clj->js props)
      children)))


;; --- mutations ---
(defmutation create-new-box
  "Creates a new box"
  [{:keys [db/id size title] :as params}]
  (action [{:keys [state]}]
    (swap! state assoc-in [:box/by-id id] {:size size :title title})))



(def TextField (factory-apply mui/TextField))

(defsc BoxComponent [this
                      {:keys [:db/id title size]}
                      computed
                      {:keys [boxSize boxDiv] :as css-name-map}]
  {
   :ident [:box/by-id :db/id]
   :query [:db/id :title :size]
   :css [[:.boxSize {:width "50px"}]
         [:.boxDiv {:border "3px solid red"}]]}
  (let [[h w] size
        h-val (atom h)
        w-val (atom w)]
    (dom/div
      (TextField {:select true
                  :label "Height"
                  :className boxSize
                  :value @h-val
                  :onChange #(reset! h-val (.. % -target -value))
                  }
        (map #(dom/option {:key % :value %} (str %)) (range 1 20))
        )
      (TextField {:select true
                  :label "Width"
                  :className boxSize
                  :value @w-val
                  :onChange #(reset! w-val (.. % -target -value))
                  }
        (map #(dom/option {:key % :value %} (str %)) (range 1 20))
        )
      (dom/button
        {:onClick #(fp/transact! this `[(create-new-box {:db/id ~1
                                                         :title "Box"
                                                         :size ~[h w]})])}
        "Create New Box")

      (dom/div :.boxDiv {:style {:width (str (* 10 w) "px")
                                 :height (str (* 10 h) "px")}})
      )))

(def ui-box (fp/factory BoxComponent {:key-fn :db/id}))

(defsc RootComponent [this {:keys [box]} computed {:keys [textField] :as css-name-map}]
  {:initial-state (fn [p] {:box {:title "Box" :db/id 1 :size [3 3]}})
   :query [{:box (fp/get-query BoxComponent)}]
   :css-include [BoxComponent]}
  (ui-box box))

(ws/defcard myapp-scratch-card
  (ct.fulcro/fulcro-card
    {
     ; if true generates a root. Useful for embedding normalized components with a placeholder root.
     ::f.portal/wrap-root? false
     ::f.portal/root RootComponent}))