import Vue from 'vue'

export const htmlSanitize = (html: string, allowHtml = true) => {
  if (!html) {
    return
  }

  const allowTags = ['img', 'br', 'p', 'div', 'span', 'video', 'a']

  const options = {
    allowedTags: [
      // Headers
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      // Styles
      'b',
      'i',
      'em',
      'strong',
      's',
      'sup',
      'sub',
      // Paragraph / Line-breaks
      // 'p',
      // 'br',
      'hr',
      // Anhor
      'a',
      // Image
      // 'img',
      // List
      'ol',
      'ul',
      'li',
      // Blockquote
      'blockquote',
      // Table
      'table',
      'tbody',
      'caption',
      'tr',
      'th',
      'td',
      // Misc
      'iframe',
      // 'div',
      // 'span',
      'video',
      'source'
    ],
    allowedAttributes: {
      h1: ['id'],
      h2: ['id'],
      h3: ['id'],
      h4: ['id'],
      h5: ['id'],
      h6: ['id'],
      p: ['style'],
      a: ['href', 'target'],
      img: ['src', 'width', 'height', 'style'],
      table: ['style', 'border', 'cellspacing', 'cellpadding'],
      tr: ['style'],
      th: ['style', 'colspan'],
      td: ['style', 'colspan'],
      div: ['id', 'class', 'style'],
      span: ['style'],
      iframe: ['src', 'width', 'height'],
      video: ['src', 'width', 'height', 'controls'],
      source: ['src']
    },
    allowedClasses: {
      '*': ['*']
    }
  }

  options.allowedTags = options.allowedTags.concat(allowTags)

  if (!allowHtml) {
    options.allowedTags = allowTags
  }

  return Vue.prototype.$sanitize(html, options)
}