// Necessary for JSX to work
window.React = {
  createElement(type, props, ...children) {
    return {
      type,
      props: {
        ...props,
        children: children || props.children
      }
    }
  }
};

// What kind of node are we dealing with?
function getNodeKind(node) {
  if (node === false || node == null) {
    // A hole: false, null, undefined
    return 'EMPTY';
  }
  if (typeof node === 'string' || typeof node === 'number') {
    // Text or number: 'Hello', 42
    return 'TEXT';
  }
  if (Array.isArray(node)) {
    // An array of nodes!
    return 'ARRAY';
  }
  if (typeof node.type === 'string') {
    // An element describing “host” (e.g. DOM) component: <div />
    return 'HOST';
  }
  if (typeof node.type === 'function') {
    // An element describing “composite” (user-defined) component: <Foo />
    return 'COMPOSITE';
  }
  throw new Error('Weird node: ' + node);
}

// To render a host element like <div />, we’ll generate
// its tag markup and render children inside.
// This is a simple implementation and doesn’t attempt to escape anything.
function renderHostElementToString(el) {
  // Separate children from attributes
  const { children, ...otherProps } = el.props;

  // Create an attribute string for markup
  let attributes = Object.keys(el.props)
    .map(propName => propName + '=' + el.props[propName])
    .join(' ');
  
  // If attributes exist, prepend a space to separate from tag
  if (attributes) {
    attributes = ' ' + attributes;
  }
  
  // Create tag strings for markup
  // For host elements, type is the tag name
  const openingTag = '<' + el.type + attributes + '>';
  const closingTag ='</' + el.type + '>';
  
  return (
    openingTag +
    // Render children recursively!
    renderToString(children) +
    closingTag
  );
}

// To render a composite component like <Foo />,
// we’ll call its type (`Foo`) with its props.
// We will then recursively render it.
function renderCompositeElementToString(el) {
  const renderedEl = el.type(el.props);
  return renderToString(renderedEl);
}

// Handle different types differently.
function renderToString(node) {
  var kind = getNodeKind(node);
  switch (kind) {
    case 'EMPTY':
      return '';
    case 'TEXT':
      return node.toString();
    case 'ARRAY':
      // Render each of them
      return node.map(renderToString).join('');
    case 'HOST':
      // <div />
      return renderHostElementToString(node);
    case 'COMPOSITE':
      // <Foo />
      return renderCompositeElementToString(node);
  }
}

// Let’s give it a try!

function Badge({ children }) {
  return (
    <div>
      <hr />
      {children}
      <hr />
    </div>
  );
}

function UserInfo({ name, location }) {
  return (
    <Badge>
      {name} lives in {location}.
    </Badge>
  );
}

function App() {
  return (
    <div>
      <h1>
        Hello, React!
      </h1>
      <UserInfo
        name="Dan"
        location="London"
      />
    </div>
  );
}

document.body.innerHTML = renderToString(<App />);