import unindent from './unindent'
import hljs from 'highlight.js'

let owner
if (window.HTMLImports && !window.HTMLImports.useNative) {
  owner = document._currentScript.ownerDocument
} else {
  owner = document.currentScript.ownerDocument
}

const codeExample = owner.querySelector('#sgCodeExample')
function createCodeExample (code) {
  const highlighted = hljs.highlight('html', code).value
  const c = codeExample.content.cloneNode(true)
  c.querySelector('code').innerHTML = highlighted

  const input = c.querySelector('.sg-copy-data')
  input.value = code

  const copyButton = c.querySelector('.sg-copy-button')
  copyButton.addEventListener('click', (evt) => {
    input.select()
    document.execCommand('copy')
  })
  return c
}

class SgExample extends window.HTMLElement {
  createdCallback () {
    let code = this.innerHTML
          .split(/\r?\n/)
          .filter(line => line.trim() !== '')
          .map(unindent())
          .join('\n')

    this._root = this.createShadowRoot()
    this._root.appendChild(createCodeExample(code))
  }
}

export default document.registerElement('sg-example', SgExample)

@@ -954,30 +954,30 @@
 ('%5Cn')%0A%0A    
-this._
+const 
 root = this.
@@ -1003,14 +1003,8 @@
     
-this._
 root

remove unneeded values on `this`