const {Chain, ChainedSet} = require('chain-able')
const React = require('react')

const allTags = ['div', 'span', 'h1']
const attributes = ['onClick', 'className', 'to', 'from']
const specific = ['props', 'state']

const flatten = x => [].concat.apply([], x)

let Tag

// https://github.com/infernojs/inferno/blob/master/packages/inferno-vnode-flags/src/index.ts
// https://github.com/infernojs/inferno/blob/master/packages/inferno-hyperscript/src/index.ts

class JSX extends Chain {
  constructor(parent) {
    super(parent)
    this.extendTags(allTags)
    this.tags = new ChainedSet(this)
  }

  extendTags(tagsArray) {
    tagsArray.forEach(tag => {
      // e.g. this.div
      this[tag] = (arg1, arg2, arg3) => {
        const instance = new Tag(this)
        instance.from(arg1)
        instance.tagName = tag
        this.tags.add(instance)
        return instance
      }
    })
  }

  render() {
    // react.createElement
    let tags = this.tags.values()
    const tagName = this.tagName

    // might need dot-prop path?
    // recursively merge all children into an object
    let values = this.entries()
    let current = values

    tags = tags.map(tag => {
      // cleaning
      if (tag.parent) delete tag.parent

      tag.tags.values().map(child => {
        if (child.render) {
          console.log('render')
          current = child.render()
          if (current.length === 0) current = child.entries()
          values.children = current
        }
        else {
          console.log('no render')
          current = child.entries()
          values.children = current
        }
      })

      return values
    })

    return {[tagName]: tags}
  }
}
Tag = JSX

const jsx = new JSX()

const eh = jsx
  .div({class: 'entry'}) // .className('entry')
  .div({class: 'top'})
  .div({class: 'name'}, 'Sammy Haddad')
  .end()
  .end()

require('fliplog').quick(eh.render())