import { serialize } from './serialize.mjs'
export function createElement(tree) {
  if (!tree.type) {
    if (Array.isArray(tree)) {
      const frag = document.createDocumentFragment()
      frag.replaceChildren(...tree.map((leaf) => createElement(leaf)))
      return frag
    }
    return document.createTextNode(tree)
  } else {
    const el = document.createElement(tree.type)
    /**
     * handle props
     */
    if (tree.props) {
      Object.entries(tree.props).forEach(([prop, value]) => {
        const domProp = prop.toLowerCase()
        if (domProp === 'style' && typeof value === 'object' && !!value) {
          applyStyles(el, value)
        } else if (prop in el) {
          el[prop] = value
        } else if (domProp in el) {
          el[domProp] = value
        } else {
          el.setAttribute(prop, serialize(value))
        }
      })
    }
    /**
     * handle children
     */
    tree.children?.forEach((child) => {
      const childEl = createElement(child)
      if (childEl instanceof Node) {
        el.appendChild(childEl)
      }
    })
    return el
  }
}

function applyStyles(el, styleObj) {
  Object.entries(styleObj).forEach(([rule, value]) => {
    if (rule in el.style && value) el.style[rule] = value
  })
}