console.log(...[1, 2, 3]) //1 2 3
console.log(1, ...[2, 3], 4) //1 2 3 4
;[...document.querySelectorAll("div")] //[<div>, <div>, ...];

function add(x, y) {
  return x + y
}
add(...[1, 2]) //3

//与表达式一同使用
const arr = [...(x > 0 ? ["a"] : []), "b"]

import { updateDomProperties } from "./dom-utils.js"

// 根实例
let rootInstance = null
const TEXT_ELEMENT = "TEXT_ELEMENT"

// 创建 VDOM 元素
function createElement(type, config, ...args) {
  const props = Object.assign({}, config)
  const hasChildren = args.length > 0
  const rawChildren = hasChildren ? [].concat(...args) : []

  props.children = rawChildren
    .filter((c) => c !== null && c !== false)
    .map((c) => (c instanceof Object ? c : createTextElement(c)))

  return { type, props }
}

function createTextElement(text) {
  return createElement(TEXT_ELEMENT, { nodeValue: text })
}

function render(element, container) {
  const prevInstance = rootInstance
  const nextInstance = reconcile(container, prevInstance, element)
  rootInstance = nextInstance
}

// 递归更新子元素
function reconcile(parentDom, instance, element) {
  if (instance === null) {
    // 创建新实例
    const newInstance = instantiate(element)
    parentDom.appendChild(newInstance.dom)
    return newInstance
  } else if (element === null) {
    // 删除实例
    parentDom.removeChild(instance.dom)
    return null
  } else if (instance.element.type !== element.type) {
    // 如果类型不同，则替换实例
    const newInstance = instantiate(element)
    // 替换实例
    parentDom.replaceChild(newInstance.dom, instance.dom)
    return newInstance
  } else if (typeof element.type === "string") {
    // 更新 DOM 实例
    updateDomProperties(instance.dom, instance.element.props, element.props)

    // 更新 instance
    instance.childInstances = reconcilerChildren(instance, element)
    instance.element = element

    return instance
  } else {
    // 更新组件实例
    instance.publicInstance.props = element.props
    const childElement = instance.publicInstance.render()
    const oldChildInstance = instance.childInstance
    const childInstance = reconcile(parentDom, oldChildInstance, childElement)

    instance.dom = childInstance.dom
    instance.childInstance = childInstance
    instance.element = element

    return instance
  }
}

function reconcilerChildren(instance, element) {
  const dom = instance.dom
  const childInstances = instance.childInstances
  const nextChildElements = element.props.children || []
  const newChildInstances = []

  const count = Math.max(childInstances.length, nextChildElements.length)

  // 本 demo, 顺序不同也算作更新

  for (let i = 0; i < count; i++) {
    const childInstance = childInstances[i]
    const childElement = nextChildElements[i]

    const newChildInstance = reconcile(dom, childInstance, childElement)

    newChildInstances.push(newChildInstance)
  }

  return newChildInstances.filter((instance) => instance !== null)
}

// 把元素实例化成真实的DOM节点
function instantiate(element) {
  const { type, props } = element
  const isDomElement = typeof type === "string"

  if (isDomElement) {
    // 创建 DOM 元素
    const isTextElement = type === TEXT_ELEMENT
    const dom = isTextElement
      ? document.createTextNode("")
      : document.createElement(type)

    // 更新 dom
    updateDomProperties(dom, [], props)

    // 实例化子元素
    const childElements = props.children || []
    const childInstances = childElements.map(instantiate)
    const childDoms = childInstances.map((childInstance) => childInstance.dom)
    childDoms.forEach((childDom) => dom.appendChild(childDom))

    const instance = { dom, element, childInstances }

    return instance
  } else {
    // 初始化组件
    const instance = {}
    const publicInstance = createPublicInstance(element, instance)
    const childElement = publicInstance.render() // 拿到 vdom
    const childInstance = instantiate(childElement) // 实例化
    const dom = childInstance.dom

    Object.assign(instance, { dom, element, publicInstance, childInstance })

    return instance
  }
}

function createPublicInstance(element, internalInstance) {
  const { type, props } = element

  // type 此时是一个 Class
  const publicInstance = new type(props)

  publicInstance.__internalInstance = internalInstance

  return publicInstance
}

function updateInstance(internalInstance) {
  const parentDom = internalInstance.dom.parentNode
  const element = internalInstance.element

  reconcile(parentDom, internalInstance, element)
}

class Component {
  constructor(props) {
    this.props = props
    this.state = this.state || {}
  }

  setState(partialState) {
    this.state = Object.assign({}, this.state, partialState)
    updateInstance(this.__internalInstance)
  }

  // render 出来的也是 VDOM
  render() {}
}

export default { render, createElement, Component }