// src\main.tsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import './index.scss';

interface IProps{
  name:string
}

function FuncationComponent(props:IProps) {
  return (
    <div className="border">
      <p>{props.name}</p>
    </div>
  );
}

// eslint-disable-next-line react/prefer-stateless-function
class ClassComponent extends Component<IProps> {
  render(): React.ReactNode {
    return (
      <div className="border">
        <p>{this.props.name}</p>
      </div>
    );
  }
}

const jsx = (
  <div className="border">
    <h1>jsx title</h1>
    <a href="https://www.baidu.com/">链接</a>
    <FuncationComponent name="FuncationComponent" />
    <ClassComponent name="ClassComponent" />
  </div>
);

render(jsx, document.getElementById('root'));

// src\react\react-dom.ts

export function render(vnode:any, container:any) {
  console.log(vnode, 'vnode');
  // vnode -> node
  const node = createNode(vnode);

  // node -> container
  container.appendChild(node);
}

function createNode(vnode:any):any {
  let node;

  const { type, props } = vnode;

  switch (true) {
    case isString(type): {
      // HTMLElement 元素
      node = document.createElement(type); // 根据类型创建真实dom
      reconcileChildren(node, props.children); // 继续渲染子元素
      updateNode(node, props); // 将属性挂载在node上
      break;
    }

    case isFunction(type):
      // React函数组件，类组件
      node = type.prototype.isReactComponent
        ? updateClassComponent(vnode)
        : updateFunctionComponent(vnode);
      break;

    case type === undefined:
      // 普通文本
      node = document.createTextNode(vnode);
      break;

    default:
      node = document.createTextNode('');
      break;
  }

  return node;
}

export function Component(props:any) {
  this.props = props;
}
Component.prototype.isReactComponent = {};

export default { Component };