/* eslint-disable import/no-unassigned-import */
import CodeMirror from 'codemirror'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/jsx/jsx'
import 'codemirror/mode/css/css'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/edit/matchtags'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/closetag'
import 'codemirror/addon/comment/comment'

const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault

export default function (el, opts = {}) {
  const editor = CodeMirror.fromTextArea(el, {
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    matchTags: { bothTags: true },
    matchBrackets: true,
    ...opts
  })

  editor.setOption('extraKeys', {
    ...editor.getOption('extraKeys'),
    Tab(cm) {
      // Indent, or place 2 spaces
      if (cm.somethingSelected()) {
        cm.indentSelection('add')
      } else if (cm.getOption('mode').indexOf('html') > -1) {
        try {
          cm.execCommand('emmetExpandAbbreviation')
        } catch (err) {
          console.error(err)
        }
      } else {
        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
        cm.replaceSelection(spaces, 'end', '+input')
      }
    },
    [isMac ? 'Cmd-/' : 'Ctrl-/'](cm) {
      cm.toggleComment()
    }
  })

  console.log('hi')
  import(/* webpackChunkName: "codemirror-emmet" */ 'codemirror-emmet').then(emmet => {
    emmet(CodeMirror)
    console.log(editor.getOption('extraKeys'))
    editor.setOption('extraKeys', {
      ...editor.getOption('extraKeys'),
      Enter: 'emmetInsertLineBreak'
    })
    editor.setOption('emmet', {
      markupSnippets: {
        'script:unpkg': 'script[src="https://unpkg.com/"]',
        'script:jsd': 'script[src="https://cdn.jsdelivr.net/npm/"]'
      }
    })
  })

  return editor
}

/* eslint-disable import/no-unassigned-import */
import CodeMirror from 'codemirror'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/jsx/jsx'
import 'codemirror/mode/css/css'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/edit/matchtags'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/closetag'
import 'codemirror/addon/comment/comment'

const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault

export default function (el, opts = {}) {
  const editor = CodeMirror.fromTextArea(el, {
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    matchTags: { bothTags: true },
    matchBrackets: true,
    ...opts
  })

  editor.setOption('extraKeys', {
    ...editor.getOption('extraKeys'),
    Tab(cm) {
      // Indent, or place 2 spaces
      if (cm.somethingSelected()) {
        cm.indentSelection('add')
      } else if (cm.getOption('mode').indexOf('html') > -1) {
        try {
          cm.execCommand('emmetExpandAbbreviation')
        } catch (err) {
          console.error(err)
        }
      } else {
        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
        cm.replaceSelection(spaces, 'end', '+input')
      }
    },
    [isMac ? 'Cmd-/' : 'Ctrl-/'](cm) {
      cm.toggleComment()
    }
  })

  import(/* webpackChunkName: "codemirror-emmet" */ 'codemirror-emmet').then(emmet => {
    emmet(CodeMirror)
    editor.setOption('extraKeys', {
      ...editor.getOption('extraKeys'),
      Enter: 'emmetInsertLineBreak'
    })
    editor.setOption('emmet', {
      markupSnippets: {
        'script:unpkg': 'script[src="https://unpkg.com/"]',
        'script:jsd': 'script[src="https://cdn.jsdelivr.net/npm/"]'
      }
    })
  })

  return editor
}

clean up