const prefix = "md-";
const selectall = `${prefix}dl`;

const renderer = {
  // Block-level methods
  code(code, infostring, escaped) {
    return `<pre class="${selectall} ${prefix}pre"><code class="${selectall} ${prefix}code">${code}</code></pre>`;
  },
  blockquote(quote) {
    return `<blockquote class="${selectall} ${prefix}blockquote">${quote}</blockquote>`;
  },
  html(html, block) {
    return block ? html : `<span class="${selectall} ${prefix}inline-html">${html}</span>`;
  },
  heading(text, level, raw, slugger) {
    return `<h${level} class="${selectall} ${prefix}h${level}">${text}</h${level}>`;
  },
  hr() {
    return `<hr class="${selectall} ${prefix}hr" />`;
  },
  list(body, ordered, start) {
    const tag = ordered ? 'ol' : 'ul';
    return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}</${tag}>`;
  },
  listitem(text, task, checked) {
    let classList = `${prefix}li`;

    if(task) {
      classList += ` ${prefix}li-checkbox`;
    } else {
      classList += ` ${prefix}li-nocheckbox`;
    }

    return `<li class="${selectall} ${classList}">${text}</li>`;
  },
  checkbox(checked) {
    return `<input type="checkbox" class="${selectall} ${prefix}checkbox" ${checked ? 'checked' : ''} disabled />`;
  },
  paragraph(text) {
    return `<p class="${selectall} ${prefix}p">${text}</p>`;
  },
  table(header, body) {
    return `<table class="${selectall} ${prefix}table"><thead class="${selectall} ${prefix}thead">${header}</thead><tbody class="${selectall} ${prefix}tbody">${body}</tbody></table>`;
  },
  tablerow(content) {
    return `<tr class="${selectall} ${prefix}tr">${content}</tr>`;
  },
  tablecell(content, flags) {
    const type = flags.header ? 'th' : 'td';
    return `<${type} class="${selectall} ${prefix}${type}">${content}</${type}>`;
  },

  // Inline-level methods
  strong(text) {
    return `<strong class="${selectall} ${prefix}strong">${text}</strong>`;
  },
  em(text) {
    return `<em class="${selectall} ${prefix}em">${text}</em>`;
  },
  codespan(code) {
    return `<code class="${selectall} ${prefix}codespan">${code}</code>`;
  },
  br() {
    return `<br class="${selectall} ${prefix}br" />`;
  },
  del(text) {
    return `<del class="${selectall} ${prefix}del">${text}</del>`;
  },
  link(href, title, text) {
    return `<a href="${href}" class="${selectall} ${prefix}a"${title ? ` title="${title}"` : ''}>${text}</a>`;
  },
  image(href, title, text) {
    return `<img src="${href}" alt="${text}" class="${selectall} ${prefix}img"${title ? ` title="${title}"` : ''} />`;
  },
  text(text) {
    return text; // text-level elements typically don't have classes
  },
};

const hooks = {
  postprocess(html) {
    return `<div class="${selectall} ${prefix}wrapper" >${html}</div>`;
  },
  preprocess(md) {
    return md;
  }
};

module.exports = {
  renderer,
  hooks
};