const MyReact = getMyReact();

const MyTodos = [
  "Implement React render",
  "Implement React component",
  "Implement React fiber",
  "Replace original React",
  "Conquer the world!"
];

function getListElement(listItem) {
  return {
    type: "li",
    props: {
      children: [
        {
          type: "TEXT_ELEMENT",
          props: {
            nodeValue: listItem
          }
        }
      ]
    }
  };
}

const myElement = {
  type: "div",
  props: {
    children: [
      {
        type: "ul",
        props: {
          children: MyTodos.map(getListElement)
        }
      }
    ]
  }
};

MyReact.render(myElement, document.getElementById("my-react-app"));

// Probably need to build everything into a single file.
// For now just adding the source code of MyReact here since require() is not supported by browsers

//======================================
// **************MYREACT****************
//======================================
function getMyReact() {
  return {
    render: function render(element, parent) {
      // Get the props and type from element object
      const { type, props } = element;

      // Check if it is a text element
      const isTextElement = type === "TEXT_ELEMENT";

      // Create a new dom element
      const dom = !isTextElement
        ? document.createElement(type)
        : document.createTextNode(props.nodeValue);

      // Filter for eventListeners in the props
      const isListener = name => name.startsWith("on");

      // Add eventListeners to the dom element
      Object.keys(props)
        .filter(isListener)
        .forEach(name => {
          const eventType = name.toLowerCase().substring(2);
          dom.addEventListener(eventType, props[name]);
        });

      const isAttribute = name => !isAttribute && name !== "children";

      Object.keys(props)
        .filter(isAttribute)
        .forEach(name => {
          dom[name] = props[name];
        });

      // Check if there are any childrens of the given element
      const childElements = props.children || [];

      // render those childrens recursively first
      childElements.forEach(el => render(el, dom));

      // finally append the element to the parent element
      parent.appendChild(dom);
    }
  };
}