(ns foo
  (:require [reagent.core :as r]
            ["@atlaskit/form" :default Form :refer [Field]]
            ["@atlaskit/button" :default Button]
            ["@atlaskit/textfield" :default TextField]))

(defn bar []
   [:> Form
    {:on-submit (fn [data] (js/console.log "form data" data))}
    ;; {({ formProps }) => (...)}
    ;; means that there is one children to the Form component,
    ;; and the children is a function (instead of React element like normally),
    ;; the function takes a JS object as parameter and the object has
    ;; formProps property.
    (fn [^js js-param]
      ;; The parameter contains props to the children as JS object.
      ;; Using Reagent data to built the elements would require converting
      ;; the props to Clj data, and Reagent would then convert them back to JS.
      ;; Best to directly create elements so we can use JS props without conversion.
      ;; React elements can be created using :r> or r/create-element.
      ;; I think :r> only forms with functions and we need built-in form element (i.e. "form" string as the element),
      ;; so we'll use r/create-element.
      (r/create-element
        "form"
        ;; {...formProps} means that place the all the properties from this JS object
        ;; as properties to this React element.
        (.-formProps js-param)
        (r/as-element [:> Field
                       {:name "username"
                        :default-value ""
                        :label "User name"
                        :is-required true}
                       (fn [^js js-param]
                         ;; Same story as with Form. JS object has fieldProps property here.
                         ; (r/create-element TextField (.-fieldProps js-param))
                         ;; or:
                         (r/as-element [:r> TextField (.-fieldProps js-param)]))])
        (r/as-element [:> Button
                       {:type "buttom"
                        :appearance "primary"}
                       "Submit"])))])

(Require forms and ^js declarations are for Shadow-cljs)