type
  clickHandler* = proc():VNode

var view* :clickHandler 

proc click*(x : clickHandler): proc() = 
  result = proc() = view = x

proc echartSection():VNode = 
    buildHtml tdiv(id = "echartSection", style = style((width, kstring"600px"), (height, kstring"400px")))

proc createDom(data: RouterData): VNode =
  let hash = data.hashPart
  if hash == cstring"#/Products": currentView = Products
  else: currentView = Customers

  result = buildHtml(tdiv):
    ul(class = "tabs"):
      for v in low(Views)..high(Views):
        li:
          if v == Products:
              a(href = "#/" & $v, onclick = click echartSection):
                text kstring($v)
          else:
            a(href = "#/" & $v):
              text kstring($v)
    tdiv:
      text "other section"

setRenderer createDom, "ROOT", postRender
setForeignNodeId "echartSection"

proc setCookie(cname:kstring, cvalue:kstring, exdays:int) {.importc.}
proc getCookie(cname:kstring):kstring {.importc.}

proc setCookie(cname:kstring, cvalue:kstring, exdays:int) = 
  if cname == kstring"":
    document.cookie = kstring""
  else:
    document.cookie = cname & "=" & cvalue & ";expires={exdays}"

proc getCookie(cname:kstring):cstring = document.cookie

include karaxprelude
import sequtils, future

type
  Model = ref object
    entries: seq[cstring]

proc postRenderCallback() =
  discard

proc onClick(ev: Event, n: VNode) =
  discard

proc onDragStart(ev: Event, n: VNode) =
  discard

proc dummy(): VNode =
  result = buildHtml():
    tdiv()

proc panel(title: string, body: VNode): VNode =
  result = buildHtml():
    tdiv(class="panel panel-default"):
      tdiv(class="panel-heading"):
        text title
      tdiv(class="panel-collapse"):
        tdiv(class="panel-body"):
          body

proc threePanels(viewL, viewC, viewR: VNode): VNode =
  result = buildHtml():
    tdiv(class="row"):
      tdiv(class="col-xs-2 sidebar sidebar-left"):
        viewL
      tdiv(class="col-xs-8 col-xs-offset-2"):
        viewC
      tdiv(class="col-xs-2 sidebar sidebar-right"):
        viewR

proc renderEntry(model: Model, entries: seq[cstring], elementIndex: int): VNode =
  proc onRemove(ev: Event, n: VNode) =
    model.entries.delete(elementIndex)
  result = buildHtml():
    span(id=entries[elementIndex], class="some-classes", draggable="true", ondragstart=onDragStart):
      span(class="label-float-left"):
        text entries[elementIndex]
      a(type="button", class="close label-float-right", onclick=onRemove):
        text "×"

proc dropzone(model: Model, entries: seq[cstring]): VNode =
  result = buildHtml():
    tdiv(class="dropzone"):
      for elementIndex, entry in entries.pairs():
        renderEntry(model, entries, elementIndex)

proc rowElement(model: Model, title: string, entries: seq[cstring], dropzoneId: cstring): VNode =
  result = buildHtml():
    tdiv(class="row vertical-align"):
      tdiv(class="col-xs-2"):
        text title
      tdiv(class="col-xs-10"):
        dropzone(model, entries)

proc viewCenter(model: Model): VNode =
  panel("Panel Header"):
    flatHtml():
      tdiv():
        rowElement(model, "Entries", model.entries, "rows".cstring)
        tdiv(class="form-group text-right"):
          tdiv(class="checkbox"):
            label():
              input(type="checkbox")
              text "Automatic update"
          button(type="button", class="btn btn-primary btn-sm", onclick=onClick):
            text "Update"

proc view(model: Model): VNode =
  result = buildHtml():
    tdiv():
      tdiv():
        text "Navbar here"
      tdiv(class="container-fluid below-navbar"):
        threePanels(
          dummy(),
          viewCenter(model),
          dummy(),
        )

proc runMain() =
  var model = Model(
    entries: toSeq(1..20).map(x => cstring($x))
  )
  proc renderer(): VNode =
    view(model)
  setRenderer(renderer, root="ROOT", clientPostRenderCallback=postRenderCallback)

runMain()

type
  RGB = tuple
    R: int
    G: int
    B: int

proc `&`*(x: RGB): cstring =
  &x.R & cstring"," & &x.G & cstring"," & &x.B

proc rgb*(rgb: RGB): cstring =
  cstring"rgb(" & &rgb & cstring")"

proc rgba*(rgb: RGB, alfa: float): cstring =
  cstring"rgba(" & &rgb & cstring"," & &alfa & cstring")"

const WhiteColor* = (R: 255, G: 255, B: 255)

tdiv(style=style(StyleAttr.color, rgba(WhiteColor, 0.5)):
  text "Test"

import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils

type TextInput* = ref object of VComponent
  value: cstring
  isActive: bool

proc render(x: VComponent): VNode =
  let self = TextInput(x)

  let style = style(
    (StyleAttr.position, cstring"relative"),
    (StyleAttr.paddingLeft, cstring"10px"),
    (StyleAttr.paddingRight, cstring"5px"),
    (StyleAttr.height, cstring"30px"),
    (StyleAttr.lineHeight, cstring"30px"),
    (StyleAttr.border, cstring"solid 1px " & (if self.isActive: cstring"red" else: cstring"black")),
    (StyleAttr.fontSize, cstring"12px"),
    (StyleAttr.fontWeight, cstring"600")
  ).merge(self.style)

  let inputStyle = style.merge(style(
    (StyleAttr.color, cstring"inherit"),
    (StyleAttr.fontSize, cstring"inherit"),
    (StyleAttr.fontWeight, cstring"inherit"),
    (StyleAttr.fontFamily, cstring"inherit"),
    (StyleAttr.position, cstring"absolute"),
    (StyleAttr.top, cstring"0"),
    (StyleAttr.left, cstring"0"),
    (StyleAttr.height, cstring"100%"),
    (StyleAttr.width, cstring"100%"),
    (StyleAttr.border, cstring"none"),
    (StyleAttr.backgroundColor, cstring"transparent"),
  ))

  proc onfocus(ev: Event; n: VNode) =
    if not self.isActive:
      kout cstring"focus"
      self.isActive = true
      markDirty(self)

  proc onblur(ev: Event; n: VNode) =
    if self.isActive:
      kout cstring"blur"
      self.isActive = false
      markDirty(self)

  result = buildHtml(tdiv(style=style)):
    input(style=inputStyle, value=self.value, onblur=onblur, onfocus=onfocus)

proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =
  result = newComponent(TextInput, render)
  result.style = style
  result.value = value

proc createDom(): VNode =
  result = buildHtml(tdiv):
    newTextInput(value=cstring"test")

setRenderer createDom

include karaxprelude

var elements = @[cstring"A", cstring"B", cstring"C", cstring"D", cstring"E"]

proc renderElement(text: cstring, index: int): VNode =

  kout(cstring"re-building closure for", text, index)
  proc remove(ev: Event, n: VNode) =
    kout(cstring"Deleting element from index: ", index)
    elements.delete(index)

  result = buildHtml():
    tdiv(onClick=remove):
      text text

proc buildDom(): VNode =
  result = buildHtml():
    tdiv:
      for index, text in elements.pairs:
        renderElement(text, index)

setRenderer buildDom

var
  refDivA: Ref = nil # maybe just use VNode?
  refDivB: Ref = nil

proc view(): VNode =
  result = buildHtml():
    tdiv(ref=refDivA): text "A"
    tdiv(ref=refDivB): text "B"

var
  refs: newJDict[int, Ref]()

proc view(): VNode =
  result = buildHtml():
    tdiv:
      for i in 0..<N:
        tdiv(ref = (r: Ref) => refs[i] = r)

include karaxprelude

type
  TestEnum {.pure.} = enum
    ValA, ValB

var e = TestEnum.ValA

proc renderDom(): VNode =
  result = buildHtml():
    tdiv():
      case e
      of TestEnum.ValA:
        tdiv: text "A"
      of TestEnum.ValB:
        tdiv: text "B"

let tmp123076 = tree(VNodeKind.tdiv)
case add(tmp123076, e)
of TestEnum.ValA:
  ...

import karax, kajax, vdom, components, karaxdsl

type
  Column = object
    t: ref Column

  Test = object
    columns: seq[Column]

var test1 = Test(columns: @[Column(t: nil), Column(t: nil)])
let test2 = test1

kout toJSON(test1)
kout toJSON(test2)

proc toJson*[T](data: T): cstring
  {.importc: """
    (function some(obj) {
      function clear(obj) {
          delete obj["m_type"];
          for (var i in obj) {
              if (obj[i] !== null && typeof(obj[i])=="object") {
                  clear(obj[i]);
              }
          }
      }
      clear(obj);
      return JSON.stringify(obj);
    })
  """.}

include karax/prelude


const maxMessageLength = 10
var buttonEnabled = true


proc renderTweetBox*(): VNode =
  buildHtml(tdiv):
    textarea():
      proc onkeyup(event: Event, n: VNode) =
        buttonEnabled =
          if n.value.len < maxMessageLength: true
          else: false

    if buttonEnabled:
      button():
        text "Tweet"
    else:
      button(disabled = "disabled"):
        text "Tweet"


setRenderer renderTweetBox

include karax / prelude

type 
    NavType = enum 
        Home = "Home", 
        Review = "[漢字 Review]"
         
var 
    currentNav = Review

doAssert(currentNav == Review, "Check 1 failed") # OK
doAssert($Review == "[漢字 Review]", "Check 2 failed") # OK
doAssert($currentNav == $Review, "Check 3 failed")  # Fails here

proc createDom(): VNode =
    result = buildHtml(tdiv()):
        text "Current page: " & $currentNav
                    
setRenderer createDom

import karax / [vdom, karax, karaxdsl, jstrutils, compact, localstorage]

type
  Filter = enum
    all, active, completed

var
  selectedEntry = -1
  filter: Filter
  entriesLen: int

const
  contentSuffix = cstring"content"
  completedSuffix = cstring"completed"
  lenSuffix = cstring"entriesLen"

proc getEntryContent(pos: int): cstring =
  result = getItem(&pos & contentSuffix)
  if result == cstring"null":
    result = nil

proc isCompleted(pos: int): bool =
  var value = getItem(&pos & completedSuffix)
  result = value == cstring"true"

proc setEntryContent(pos: int, content: cstring) =
  setItem(&pos & contentSuffix, content)

proc markAsCompleted(pos: int, completed: bool) =
  setItem(&pos & completedSuffix, &completed)

proc addEntry(content: cstring, completed: bool) =
  setEntryContent(entriesLen, content)
  markAsCompleted(entriesLen, completed)
  inc entriesLen
  setItem(lenSuffix, &entriesLen)

proc updateEntry(pos: int, content: cstring, completed: bool) =
  setEntryContent(pos, content)
  markAsCompleted(pos, completed)

proc onTodoEnter(ev: Event; n: VNode) =
  addEntry(n.value, false)
  n.value = ""

proc removeHandler(ev: Event; n: VNode) =
  updateEntry(n.index, cstring(nil), false)

proc editHandler(ev: Event; n: VNode) =
  selectedEntry = n.index

proc focusLost(ev: Event; n: VNode) = selectedEntry = -1

proc editEntry(ev: Event; n: VNode) =
  setEntryContent(n.index, n.value)
  selectedEntry = -1

proc toggleEntry(ev: Event; n: VNode) =
  let id = n.index
  markAsCompleted(id, not isCompleted(id))

proc onAllDone(ev: Event; n: VNode) =
  clear()
  selectedEntry = -1

proc clearCompleted(ev: Event, n: VNode) =
  for i in 0..<entriesLen:
    if isCompleted(i): setEntryContent(i, nil)

proc toClass(completed: bool): cstring =
  (if completed: cstring"completed" else: cstring(nil))

proc selected(v: Filter): cstring =
  (if filter == v: cstring"selected" else: cstring(nil))

proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compact.} =
  result = buildHtml(tr):
    li(class=toClass(completed)):
      if not selected:
        tdiv(class = "view"):
          input(class = "toggle", `type` = "checkbox", checked = toChecked(completed),
                onclick=toggleEntry, index=id)
          label(onDblClick=editHandler, index=id):
            text d
          button(class = "destroy", index=id, onclick=removeHandler)
      else:
        input(class = "edit", name = "title", index=id,
          onblur = focusLost,
          onkeyupenter = editEntry, value = d, setFocus=true)

proc makeFooter(entriesCount, completedCount: int): VNode {.compact.} =
  result = buildHtml(footer(class = "footer")):
    span(class = "todo-count"):
      strong:
        text(&entriesCount)
      text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
    ul(class = "filters"):
      li:
        a(class = selected(all), href = "#/"):
          text "All"
      li:
        a(class = selected(active), href = "#/active"):
          text "Active"
      li:
        a(class = selected(completed), href = "#/completed"):
          text "Completed"
    button(class = "clear-completed", onclick = clearCompleted):
      text "Clear completed (" & &completedCount & ")"

proc makeHeader(): VNode {.compact.} =
  result = buildHtml(header(class = "header")):
    h1:
      text "todos"
    input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
          onkeyupenter = onTodoEnter, setFocus)

proc createDom(): VNode =
  result = buildHtml(tdiv(class="todomvc-wrapper")):
    section(class = "todoapp"):
      makeHeader()
      section(class = "main"):
        input(class = "toggle-all", `type` = "checkbox", name = "toggle")
        label(`for` = "toggle-all", onclick = onAllDone):
          text "Mark all as complete"
          text "Testing latin character \243"
        var entriesCount = 0
        var completedCount = 0
        ul(class = "todo-list"):
          #for i, d in pairs(entries):
          for i in 0..entriesLen-1:
            var d0 = getEntryContent(i)
            var d1 = isCompleted(i)
            if d0 != nil:
              let b = case filter
                      of all: true
                      of active: not d1
                      of completed: d1
              if b:
                createEntry(i, d0, d1, i == selectedEntry)
              inc completedCount, ord(d1)
              inc entriesCount
      makeFooter(entriesCount, completedCount)

setOnHashChange(proc(hash: cstring) =
  if hash == "#/": filter = all
  elif hash == "#/completed": filter = completed
  elif hash == "#/active": filter = active
)

if hasItem(lenSuffix):
  entriesLen = parseInt getItem(lenSuffix)
else:
  entriesLen = 0
setRenderer createDom

include karaxprelude
import json
var jString = "{}"
var jNode = parseJson(jString)

import vdom, karax, karaxdsl

type
  User = object
    name: cstring

var users = @[@[User(name: cstring"a")], @[User(name: cstring"b")]]

const MAX = 250

for z in 0..<MAX:
  users.add(@[])
  for y in 0..<20:
    users[^1].add(User(name: cstring("c" & $z)))

var specialLine = -1

proc render: VNode =
  result = buildHtml(tdiv):
    for i, line in users:
      var special = ""
      if specialLine == i:
        special = "focus"

      tdiv(class="line " & special):
        for m in line:
          span:
            text(m.name)

proc ok: VNode =
  # render()
  result = buildHtml(tdiv):
    tdiv:
      tdiv:
        render()

proc top: VNode =
  result = buildHtml(tdiv):
    section(id="main"):
      ok()

setRenderer(top)

include karax/prelude


const maxMessageLength = 10
var buttonEnabled = true


proc renderTweetBox*(): VNode =
  buildHtml(tdiv):
    textarea():
      proc onkeyup(event: Event, n: VNode) =
        buttonEnabled =
          if n.value.len < maxMessageLength: true
          else: false

    if buttonEnabled:
      button():
        text "Tweet"
    else:
      button(disabled = "disabled"):
        text "Tweet"


setRenderer renderTweetBox

type mismatch: got <VNode, EventKind, proc (event: Event, n: VNode){.gcsafe, locks: 0.}, KaraxInstance>

but expected one of:
proc addEventHandler(n: VNode; k: EventKind; action: EventHandler;
kxi: KaraxInstance = kxi)
first type mismatch at position: 3
required type: EventHandler
but expression 'proc (event: Event; n: VNode) = buttonEnabled = if len(value(n)) < 10: true else: false' is of type: proc (event: Event, n: VNode){.gcsafe, locks: 0.}
proc addEventHandler(n: VNode; k: EventKind; action: proc (); kxi: KaraxInstance = kxi)
first type mismatch at position: 3
required type: proc (){.closure.}
but expression 'proc (event: Event; n: VNode) = buttonEnabled = if len(value(n)) < 10: true else: false' is of type: proc (event: Event, n: VNode){.gcsafe, locks: 0.}

expression: addEventHandler(tmp179021, onkeyup, proc (event: Event; n: VNode) = buttonEnabled = if len(
value(n)) < 10: true else: false, kxi)

    # TODO: Surely there is a better way to handle this.
    let rankSelect = buildHtml():
      if isAdmin:
        select(class="form-select", value = $profile.user.rank):
          for r in Rank:
            option(text $r)
      else:
        select(class="form-select", value = $profile.user.rank, disabled=""):
          for r in Rank:
            option(text $r)

import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils

type TextInput* = ref object of VComponent
  value: cstring
  placeholder: cstring

proc render(x: VComponent): VNode =
  let self = TextInput(x)

  let style = style(
    (StyleAttr.position, cstring"relative"),
    (StyleAttr.paddingLeft, cstring"10px"),
    (StyleAttr.paddingRight, cstring"5px"),
    (StyleAttr.height, cstring"30px"),
    (StyleAttr.lineHeight, cstring"30px"),
    (StyleAttr.border, cstring"solid 1px black"),
    (StyleAttr.fontSize, cstring"12px"),
    (StyleAttr.fontWeight, cstring"600")
  ).merge(self.style)

  let inputStyle = style.merge(style(
    (StyleAttr.color, cstring"inherit"),
    (StyleAttr.fontSize, cstring"inherit"),
    (StyleAttr.fontWeight, cstring"inherit"),
    (StyleAttr.fontFamily, cstring"inherit"),
    (StyleAttr.position, cstring"absolute"),
    (StyleAttr.top, cstring"0"),
    (StyleAttr.left, cstring"0"),
    (StyleAttr.height, cstring"100%"),
    (StyleAttr.width, cstring"100%"),
    (StyleAttr.border, cstring"none"),
    (StyleAttr.backgroundColor, cstring"transparent"),
  ))

  let placeholderStyle = style(
    (StyleAttr.opacity, cstring"0.35"),
    (StyleAttr.fontStyle, cstring"italic"),
    (StyleAttr.overflow, cstring"hidden")
  )

  proc onfocus(ev: Event; n: VNode) =
    self.placeholder = self.placeholder & cstring"1"
    kout cstring"focus"
    markDirty(self)

  proc onblur(ev: Event; n: VNode) =
    kout cstring"blur"

  result = buildHtml(tdiv(style=style)):
    if self.value == nil or len(self.value) == 0:
      tdiv(style=placeholderStyle):
        text self.placeholder
    input(style=inputStyle, value=self.value, onblur=onblur, onfocus=onfocus)

proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""; placeholder: cstring = cstring""): TextInput =
  result = newComponent(TextInput, render)
  result.style = style
  result.value = value
  result.placeholder = placeholder

proc createDom(): VNode =
  result = buildHtml(tdiv):
    newTextInput(placeholder=cstring"test")

setRenderer createDom

import future

include karax/prelude


var liked = false


proc render*(): VNode =
  buildHtml:
    if liked:
      text "You liked this"
    else:
      button(onclick = () => (liked = true)):
        text "Like"

include karax/prelude

from likebutton import nil


proc render(): VNode =
  buildHtml(tdiv):
    h1:
      text "Hello Karax!"
    likebutton.render()


when isMainModule:
  setRenderer render