// simple syntax highlighter and formatter
const formats = {
  tabs(match: any) {
    return '\t' + match
  },
  newlines(match: any, group: string) {
    // /*_*/
    return group + (group === '}' ? '\n\n' : '\n')
  },
  value(match: any, group: string) {
    return ': <span class=value>' + group.trim() + '</span>;'
  },
  valueIndent(match: any, group: string) {
    return ': ' + group.trim() + ';'
  },
  selectorNewLine(match: any, group: string) {
    return '' + group.trim() + ' {\n'
  },
  selector(match: any, group: string) {
    return '<span class=selector>' + group.trim() + '</span> {\n'
  },
  block(match: any, group1: string, group2: string, group3: string) {
    //  /*_*/
    return group1 + group2.split('\n').join('\n\t') + group3
  },
  string(match: any) {
    return '<span class=string>' + match.trim() + '</span>'
  },
}

// @todo re-format tags for demo out back for debug
function prettify(css: string) {
  let processed = css
  processed = processed.replace(/(;|\})/g, formats.newlines)
  // processed = processed.replace(/(.*?)\{/g, formats.selector)
  processed = processed.replace(/(.*?)\{/g, formats.selectorNewLine)
  processed = processed.replace(/:(.*);/g, formats.valueIndent)
  processed = processed.replace(/^.*;$/gm, formats.tabs)
  processed = processed.replace(/\}\n\n\}/g, '}\n}')
  processed = processed.replace(/(.*@.*\{)([^\0]+\})(\n\})/g, formats.block)
  // processed = processed.replace(/['"`].*?['"`]/g, formats.string)
  return `\n` + processed
}

export { prettify }
export default prettify