import { Component, EditorSession,
  ProseEditorConfigurator as Configurator } from 'substance'
import MiniEditor from '../../miniEditor/miniEditor'
import config from '../../miniEditor/config'
import Importer from '../../miniEditor/MiniEditorImporter'
import SimpleExporter from '../../SimpleEditorExporter'
import {forEach} from 'lodash'

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

    this.resize = this.resize.bind(this)
    this.stopResize = this.stopResize.bind(this)
    this.saveNotes = this.saveNotes.bind(this)
  }
  // use toc:updated to avoid rewriting TOCProvider's this.handleDocumentChange
  didMount () {
    const provider = this.getProvider()
    this.context.editorSession.onUpdate('document', this.onNotesUpdated, this)
    provider.config.miniEditorSession.onUpdate('', this.saveNotes, this)
  }

  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('mini-editor-content-panel').children
    scrollPane[0].style.minHeight = height - 40 + 'px'
    this.el.el.style.height = height + 'px'
  }

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

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

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

    const miniEditorProps = this.getParentProps()

    el.append($$(MiniEditor, {
      book: miniEditorProps.book,
      editorSession: miniEditorSession,
      comments: miniEditorProps.comments,
      containerId: 'mini',
      history: miniEditorProps.history,
      disabled: miniEditorProps.disabled,
      fragment: miniEditorProps.fragment,
      trackChanges: miniEditorProps.trackChanges,
      update: miniEditorProps.update,
      user: miniEditorProps.user
    }))

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

    return el
  }

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

    const provider = this.getProvider()

    const notes = provider.computeEntries()
    let noteContent = ''

    for (var i = 0; i < notes.main.length; i++) {
      noteContent += notes.main[i]['note-content']
    }

    const doc = importer.importDocument(noteContent)

    const editorSession = new EditorSession(doc, {
      configurator: configurator
    })
    editorSession.setSaveHandler({
      saveDocument: this.saveNotes
    })
    return editorSession
  }

  saveNotes (source) {
    const provider = this.getProvider()
    const surface = this.getSurface()
    // For some reason the first character is not in the annotation so it is not getting saved
    // so we rerender the Surface
    surface.rerender()
    const notes = provider.computeEntries()
    const configurator = new Configurator().import(config)
    const exporter = new SimpleExporter(configurator.config)

    forEach(notes.main, function (mainNote) {
      forEach(notes.mini, function (miniNote) {
        if (miniNote.parentNoteId === mainNote.id) {
          console.log(exporter.createElement(miniNote))
          // console.log(exportedNode)
          // const exportedNode = exporter.convertNode(miniNote)
          // console.log('sdlkfjslfkjsfdlkj', exporter.annotatedText(exportedNode.getTextPath()))
          this.context.editorSession.transaction(function (tx, args) {
            const path = [mainNote.id, 'note-content']
            tx.set(path, 'exportedNode.outerHTML')
          })
        }
      }.bind(this))
    }.bind(this))
    return new Promise(function (resolve, reject) {
      resolve()
    })
  }
  getProvider () {
    return this.context.notesProvider
  }

  getSurface () {
    const provider = this.getProvider()
    return provider.config.miniEditorContext.surfaceManager.getSurface('mini')
  }

  getParentProps () {
    return {
      comments: this.context.commentsProvider.config.comments,
      disabled: this.context.editor.props.disabled,
      book: this.context.editor.props.book,
      fragment: this.context.editor.props.fragment,
      history: this.context.editor.props.history,
      trackChanges: this.context.editor.props.trackChanges,
      update: this.context.editor.props.update,
      user: this.context.editor.props.user
    }
  }

  onNotesUpdated (change) {
    const notesProvider = this.getProvider()
    notesProvider.handleDocumentChange(change)
    // this.el.el.style.height = '95px'
  }

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

export default Notes