import React from 'react'
import { get, debounce } from 'lodash'
import { connect } from 'react-redux'
import Avatar from './Avatar'
import RichTextEditor from './RichTextEditor'
import { createComment, updateCommentEditor } from '../actions'
import { ADDED_COMMENT, trackEvent } from '../util/analytics'
import { textLength } from '../util/text'
import TagDescriptionEditor from './TagDescriptionEditor'
var { array, bool, func, object, string } = React.PropTypes

@connect((state, { postId }) => ({
  currentUser: get(state, 'people.current'),
  editingTagDescriptions: state.editingTagDescriptions,
  text: state.commentEdits[postId]
}))
export default class CommentForm extends React.Component {
  static propTypes = {
    currentUser: object,
    dispatch: func,
    postId: string,
    mentionOptions: array,
    placeholder: string,
    editingTagDescriptions: bool,
    text: string
  }

  constructor (props) {
    super(props)
    this.state = {}
  }

  submit = event => {
    const { dispatch, postId, text } = this.props
    if (event) event.preventDefault()
    if (!text || textLength(text) < 2) return

    // this is to make sure the last edit in TinyMCE gets saved on mobile,
    // because the blur event doesn't fire when the button is tapped otherwise
    this.refs.button.focus()
    setTimeout(() => {
      dispatch(createComment(postId, text, this.state.tagDescriptions))
      .then(({ error }) => {
        if (error) return
        trackEvent(ADDED_COMMENT, {post: {id: postId}})
      })
    })
  }

  saveWithTagDescriptions = tagDescriptions => {
    this.setState({tagDescriptions})
    this.submit()
  }

  render () {
    const { currentUser, editingTagDescriptions, dispatch, postId, text } = this.props
    const editing = text !== undefined
    const edit = () => {
      dispatch(updateCommentEditor(postId, ''))
    }
    const setText = debounce(event => dispatch(updateCommentEditor(postId, event.target.value)), 200)
    const placeholder = this.props.placeholder || 'Add a comment...'

    return <form onSubmit={this.submit} className='comment-form'>
      <Avatar person={currentUser}/>
      {editing
        ? <div className='content'>
            {editingTagDescriptions && <TagDescriptionEditor
              onSave={this.saveWithTagDescriptions}/>}
            <RichTextEditor ref='editor' name='comment' startFocused
              content={text}
              onChange={setText}/>
            <input type='submit' value='Comment' ref='button'/>
          </div>
        : <div className='content placeholder' onClick={edit}>
            {placeholder}
          </div>}
    </form>
  }
}

@@ -35,18 +35,8 @@
  get
-, debounce
  %7D f
@@ -1775,28 +1775,29 @@
 nst 
-edit = () =%3E %7B%0A     
+updateStore = text =%3E
  dis
@@ -1834,94 +1834,96 @@
 Id, 
-''
+text
 ))%0A    
-%7D%0A    const setText = debounce(event =%3E dispatch(updateCommentEditor(postId, 
+const edit = () =%3E updateStore('')%0A%0A    const setText = event =%3E updateStore(
 even
@@ -1941,15 +1941,8 @@
 lue)
-), 200)
 %0A   
@@ -2376,16 +2376,88 @@
 =%7Btext%7D%0A
+              onBlur=%7B() =%3E updateStore(this.refs.editor.getContent())%7D%0A
         

add onBlur update to comment form