let reconcileApp = () => {};
function html(tag, props = {}, children = []) {
  return {
    tag,
    props,
    children,
    type: "element",
    domRef: undefined,
  };
}
function primitive(value) {
  return {
    type: "primitive",
    value,
  };
}
class Component {
  type = "component";
  rendered;
  constructor(props = {}) {
    this.props = props;
  }
  setState(nextState) {
    this.state = nextState;
    reconcileApp();
  }
  render() {}
  onMount() {}
  onUnmount() {}
}
function mount(node, rootDOMElement) {
  switch (node.type) {
    case "element": {
      const { props, tag } = node;
      node.domRef = document.createElement(tag);
      patchDOMElement(props, node.domRef);
      rootDOMElement.appendChild(node.domRef);
      node.children.forEach((childNode) => mount(childNode, node.domRef));
      break;
    }
    case "component":
      node.rendered = node.render();
      node.onMount();
      mount(node.rendered, rootDOMElement);
      break;
    case "primitive":
      node.domRef = document.createTextNode(node.value);
      rootDOMElement.appendChild(node.domRef);
      break;
    default:
      throw Error("Неожиданный узел: ", node.type);
  }
}
function unmount(node) {
  switch (node.type) {
    case "element": {
      node.domRef.remove();
      node.children.forEach((childNode) => unmount(childNode));
      break;
    }
    case "component":
      node.onUnmount();
      unmount(node.rendered);
      break;
    case "primitive":
      node.domRef.remove();
      break;
    default:
      throw Error("Неожиданный узел: ", node.type);
  }
}
function patchDOMElement(props, element) {
  const attributes = Object.keys(props);
  for (attr of attributes) {
    element[attr] = props[attr];
  }
}
function isEqualNodes(node1, node2) {
  if (node1.type !== node2.type) {
    return false;
  }
  switch (node1.type) {
    case "element":
      return node1.tag === node2.tag;
    case "component":
      return (
        Object.getPrototypeOf(node1) === Object.getPrototypeOf(node2) &&
        node1.props.key === node2.props.key
      );
    case "primitive":
      return node1.value === node2.value;
    default:
      return false;
  }
}
function reconcile(prevNode, nextNode, parentDOMElement) {
  if (!prevNode && nextNode) {
    mount(nextNode, parentDOMElement);
    return nextNode;
  } else if (prevNode && !nextNode) {
    unmount(prevNode);
    return;
  } else if (!prevNode && !nextNode) {
    return;
  } else if (prevNode && nextNode) {
    const isEqual = isEqualNodes(prevNode, nextNode);
    if (isEqual) {
      if (prevNode.type === "element") {
        const { props, children: nextChildren } = nextNode;
        const { domRef, children: prevChildren } = prevNode;
        prevNode.props = props;
        patchDOMElement(props, domRef);
        const length = Math.max(prevChildren.length, nextChildren.length);
        for (let i = 0; i < length; i++) {
          prevChildren[i] = reconcile(
            prevChildren[i],
            nextChildren[i],
            prevNode.domRef
          );
        }
        return prevNode;
      } else if (prevNode.type === "component") {
        prevNode.props = nextNode.props;
        prevNode.rendered = reconcile(
          prevNode.rendered,
          prevNode.render(),
          parentDOMElement
        );
        return prevNode;
      } else if (prevNode.type === "primitive") {
        return prevNode;
      } else {
        throw Error("Упс!");
      }
    } else {
      unmount(prevNode);
      mount(nextNode, parentDOMElement);
      return nextNode;
    }
  }
}
function createApp(App, root) {
  let vdom = new App();
  mount(vdom, root);
  reconcileApp = () => {
    vdom = reconcile(vdom, vdom, root);
  };
}

class Input extends Component {
  state = { value: "" };
  constructor(props) {
    super(props);
  }
  render() {
    return html("div", {}, [
      html("input", {
        oninput: (event) => {
          this.setState({
            ...this.state,
            value: event.target.value,
          });
        },
        value: this.state.value,
      }),
      html(
        "button",
        {
          onclick: () => {
            if (this.state.value) {
              this.props.onAdd(this.state.value);
              this.setState({
                ...this.state,
                value: "",
              });
            }
          },
          disabled: !this.state.value,
        },
        [primitive("Добавить")]
      ),
    ]);
  }
}
class Item extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return html("li", {}, [
      primitive(this.props.name),
      html("button", { onclick: this.props.onRemove }, [primitive("Удалить")]),
    ]);
  }
}

class List extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return html(
      "ul",
      {},
      this.props.list.map((item) => {
        return new Item({
          name: item,
          key: item,
          onRemove: () => this.props.onRemove(item),
        });
      })
    );
  }
}

class ToDoApp extends Component {
  state = { list: [] };
  render() {
    return html("div", {}, [
      new Input({
        onAdd: (item) => {
          this.setState({
            list: [...this.state.list, item],
          });
        },
      }),
      new List({
        list: this.state.list,
        onRemove: (item) => {
          this.setState({
            list: this.state.list.filter((i) => i !== item),
          });
        },
      }),
    ]);
  }
}
createApp(ToDoApp, document.body);