(ql:quickload :clog)

(clog-install-dir)
;; #P"/home/efim/quicklisp/local-projects/clog/"

(clog:run-tutorial 1)

(in-package clog-user)

(defun my-setup (body)
  (let ((header (create-child body "<h1>lalalla</h1>"))
        (colors '(:black :blue :green)))
    (setf (color header) :pink)
    (set-on-click header
                  (lambda (obj)
                    (declare (ignore obj))
                    ;; if set value in debugger, this is how to delete it
                    ;; since it's just created in image
                    ;; (boundp 'colors)
                    ;; (makunbound 'colors)
                    (nth (random (length colors)) colors)
                    (setf (color header) (nth (random (length colors)) colors)))))
  (create-child body "<p>lalalla</p>"))        ; now, that doesn't work.

(initialize #'my-setup)
(open-browser)

;; now again, what about color keywords
;; well, maybe there's some kind of filtering for correct color values

;; and ispecting source is easier with sly-inspect-definition

;; let's look at second tutorial?

;; more lispier creation of elements
(clog:run-tutorial 2)


          ;;   :address :article :aside :header :main :nav :hgroup
          ;;   :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6
(defun my-setup-with-more-elements (body)
  (let ((my-h1 (create-section body :h1 :content "content of h1")))
    (create-section body :address :content "what-s content of address?")
    (create-section body :article :content "what-s content of article?")
    (create-section body :aside :content "what-s content of aside?")
    (format t "running setup on ~S with ~S" body my-h1)))

;; article is "independent content" which should be reasonable to distribute on its own
;; aside - to put content out of main column?
;; main - The content inside the <main> element should be unique to the
;; document. It should not contain any content that is repeated across documents
;; such as sidebars, navigation links, copyright information, site logos, and
;; search forms.

;; what would be comfortable way to compose that?
;; apart from using let?
;; maybe that's in tutorial 3?

(initialize #'my-setup-with-more-elements)
(open-browser)

(clog:run-tutorial 3)

;; tutorial 3 is about wrapping code into (with-sync-event (obj) ... )
;; that would guard start of function on some event until after previous completes. cool

(clog:run-tutorial 4)
;; reusing handler, and function generic, without much of type specification, looks unusual

(clog:run-tutorial 5)

;; so, connection-data-item on obj - target, or *body* seems to not care, having strigly named attributes
;; shareable by components?

;; how'd I use that?
;; I guess to maybe pass component to act upon, without doing elaborate nested LET expressions
;; just during creation of some component, save it as such variable,
;; then in handler it could be targeted by being taken by name
;;
;; but, yeah, also passing values between handlers or something

(clog:run-tutorial 6)
;; every click / handler starts in new thread.
;; so if I want reentrant code, use `connection-data-item`

(clog:run-tutorial 7)