const UI = {
  createElement: config => {
    if (!config) return document.createElement("div");
    const elementType = config.element || "div";
    const element = document.createElement(elementType);

    Object.keys(config).forEach(property => {
      const value = config[property];
      switch (property.toLowerCase()) {
        case "id":
        case "src":
        case "style":
        case "placeholder":
        case "title":
          element.setAttribute(property, value);
          return;
        case "classname":
          element.setAttribute("class", value);
          return;
        case "text":
          element.innerText = value;
          return;
        case "html":
          element.innerHTML = value;
          return;
        case "onclick":
          element.onclick = value.bind(element);
          return;
        case "onchange":
          element.onchange = value.bind(element);
          return;
        case "onkeydown":
          element.onkeydown = value.bind(element);
          return;
        case "type":
          if (elementType === "input") element.setAttribute("type", value);
          return;
        case "children":
          if (value instanceof Array) {
            value.forEach(child =>
              element.appendChild(
                child instanceof Element ? child : UI.createElement(child)
              )
            );
          } else {
            element.appendChild(
              value instanceof Element ? value : UI.createElement(value)
            );
          }
          return;
        case "disabled":
          if (value) element.setAttribute("disabled", true);
          return;
      }
    });
    return element;
  },
  getElement: id => {
    return document.getElementById(id);
  },
  getRoot: () => {
    return document.getElementsByTagName("body")[0];
  }
};