import jsconsole, jsffi, strutils, sequtils, sugar
import sugar
import ../bindings/react/react_dom,
       ../bindings/react/react_types,
       ../bindings/react/react_styles,
       ../bindings/react/react_hooks
import sequtils
import options
import strformat
import ../../org/org_block_heading
import ../../org/org_builder
import ../../org/org_types

proc renderItems(
  onClick: proc(e: react_types.Event): void,
  count: Option[int],
): ReactNode =
  `div`(
    Attrs{
      onClick: onclick
    },
    &"Add button {count.get(0)}"
  )

proc makeTopLevel(): ReactNode {.exportc.} =
  let text = myUseState[cstring]("")

  let val = text.getter
  let orgItems: seq[string] = makeOrg($val)
  .foldOrg()


  console.log(orgItems)

  `div`(
    Attrs{style: Style{marginTop: 50}},
    @[
      textarea(
        Attrs{
          onchange: proc(e: react_types.Event): void = discard text.setter(e.target.value)
        },
      ),
      `div`(
        Attrs{},
        $orgItems
      )
    ]
  )