const el = (tag, text?) => {
  const e = document.createElement(tag);
  if (text) e.innerHTML = text;
  return e;
};

const blocks = {
  header: ({ level, text }) => el('h' + level, text),
  paragraph: ({ text }) => el('p', text),
  list: ({ style, items }) => {
    const e = el(style[0] + 'l');
    items.map(text => e.appendChild(el('li', text)));
    return e;
  },
  quote: ({ text }) => el('blockquote', text),
  delimiter: () => el('hr')
};

const createHTML = data => {
  const b = document.createElement('div');
  b.id = 'like-water';
  b.setAttribute(
    'data-file',
    document.getElementById('like-water').getAttribute('data-file')
  );
  data.blocks.map(({ type, data }) =>
    b.appendChild(blocks[type] ? blocks[type](data) : data)
  );
  return b.outerHTML;
};

export default createHTML;