import { Component, EditorSession,
  ProseEditorConfigurator as Configurator } from 'substance'
import NotesEditor from '../../notesEditor/NotesEditor'
import config from '../../notesEditor/config'
import Importer from '../../notesEditor/NotesEditorImporter'
import SimpleExporter from '../../SimpleEditorExporter'
import {isEmpty, find} from 'lodash'

class Notes extends Component {
  constructor (props) {
    super(props)

    this.resize = this.resize.bind(this)
    this.stopResize = this.stopResize.bind(this)
  }

  didMount () {
    this.context.editorSession.onUpdate('document', this.onNotesUpdated, this)
  }

  didUpdate () {
    // TEMP This will be merged in redesign branch.
    this.el.el.classList.remove('sm-auto-fill')
    this.el.el.classList.remove('se-pane')
    const mainScrollPane = document.getElementById('content-panel')
    mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
  }

  render ($$) {
    const notesSessionConf = this._initNotesEditor()
    const resizer = $$('div').addClass('resize-area')

    const el = $$('div')
         .addClass('notes-container').append(resizer)

    const notesEditorProps = this.getParentProps()

    el.append($$(NotesEditor, {
      book: notesEditorProps.book,
      editorSession: notesSessionConf.editorSession,
      comments: notesEditorProps.comments,
      configurator: notesSessionConf.configurator,
      containerId: 'notes',
      history: notesEditorProps.history,
      disabled: notesEditorProps.disabled,
      fragment: notesEditorProps.fragment,
      trackChanges: notesEditorProps.trackChanges,
      trackChangesView: notesEditorProps.trackChangesView,
      update: notesEditorProps.update,
      user: notesEditorProps.user
    }))

    resizer.addEventListener('mousedown', this.initResize, false)

    return el
  }

  _initNotesEditor () {
    const configurator = new Configurator().import(config)
    configurator.addImporter('html', Importer)
    const importer = configurator.createImporter('html')

    const provider = this.getProvider()

    const notes = provider.computeEntries()
    const exporter = new SimpleExporter(configurator.config)
    let noteContent = ''

    for (var i = 0; i < notes.length; i++) {
      let isolatedNoteElement = exporter.createElement('isolated-note')
      isolatedNoteElement.setAttribute('data-parent-id', notes[i].id)
      isolatedNoteElement.innerHTML = notes[i]['note-content']
      noteContent += isolatedNoteElement.outerHTML
    }

    const doc = importer.importDocument(noteContent)

    const editorSession = new EditorSession(doc, {
      configurator: configurator
    })

    return {
      editorSession: editorSession,
      configurator: configurator
    }
  }

  initResize (e) {
    window.addEventListener('mousemove', this.resize, false)
    window.addEventListener('mouseup', this.stopResize, false)
  }

  resize (e) {
    const height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY)
    const scrollPane = document.getElementById('notes-editor-content-panel').children
    scrollPane[0].style.minHeight = height - 40 + 'px'
    const mainScrollPane = document.getElementById('content-panel')
    mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
    this.el.el.style.height = height + 'px'
  }

  stopResize (e) {
    window.removeEventListener('mousemove', this.resize, false)
    window.removeEventListener('mouseup', this.stopResize, false)
  }

  onNotesUpdated (change) {
    const notesProvider = this.getProvider()
    notesProvider.handleDocumentChange(change)
    const notesEditor = this.getNotesEditor()

    const noteCreated = find(change.created, function (value, key) {
      return value.type === 'note'
    })

    const noteDeleted = find(change.deleted, function (value, key) {
      return value.type === 'note'
    })

    if (!isEmpty(noteCreated)) {
      notesEditor.emit('notes:inserted', noteCreated.id)
      return false
    }

    if (!isEmpty(noteDeleted)) {
      notesEditor.emit('notes:deleted', noteDeleted.id)
      return false
    }
  }

  getParentProps () {
    const editor = this.context.editor
    const commentsProvider = this.context.commentsProvider
    let trackChangesView = ''
    if (editor.refs.toolbar) {
      trackChangesView = editor.refs.toolbar.props.trackChangesView
    }

    return {
      comments: commentsProvider.config.comments,
      disabled: editor.props.disabled,
      book: editor.props.book,
      fragment: editor.props.fragment,
      history: editor.props.history,
      trackChanges: editor.props.trackChanges,
      update: editor.props.update,
      user: editor.props.user,
      trackChangesView: trackChangesView
    }
  }

  getProvider () {
    return this.context.notesProvider
  }

  getSurface () {
    const provider = this.getProvider()
    const containerId = this.getContainerId()
    return provider.config.notesEditorContext.surfaceManager.getSurface(containerId)
  }

  getNotesEditor () {
    const provider = this.getProvider()
    return provider.config.notesEditorContext.editor
  }

  getContainerId () {
    const provider = this.getProvider()
    return provider.config.notesEditorContext.editor.props.containerId
  }

  dispose () {
    const provider = this.getProvider()
    provider.off(this)
  }
}

export default Notes