import React, {Component} from 'react'
import classNames from 'classnames/bind'
import LineBrokenText from './line_broken_text'
import Field from './field'
import {color} from '../common/constants'

let cx = classNames.bind(require('../styles/field.scss'))

class CommentField extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false,
    }
    this.enter_edit_mode = this.enter_edit_mode.bind(this)
    this.quit_edit_mode = this.quit_edit_mode.bind(this)
  }

  enter_edit_mode() {
    this.setState({active: true})
    this.should_focus_comment_input = true
  }

  quit_edit_mode(comment) {
    this.setState({active: false})
    this.props.on_submit_comment(comment)
  }

  componentDidMount() {
    const {comment, auto_focus} = this.props
    this.comment_input.update_comment(comment)
    if (auto_focus) {
      this.enter_edit_mode()
    }
  }

  componentDidUpdate() {
    if (this.should_focus_comment_input) {
      this.comment_input.focus()
      this.should_focus_comment_input = false
    }
  }

  componentWillReceiveProps(props) {
    if (props.comment != this.props.comment) {
      this.comment_input.update_comment(props.comment)
    }
  }

  render() {
    return (
      <Field {...this.props} category="comment" className={cx({'field_active': this.state.active && !this.props.locked})}>
        <div className={cx('field__display', {'field__display_empty': this.props.comment.length == 0, 'field__display_locked': this.props.locked})} onClick={this.props.editable ? this.enter_edit_mode : null}>
          <div className={cx('field__label', 'field__label_comment')}>
            <LineBrokenText>
              {this.props.comment.length == 0 ? "..." : this.props.comment}
            </LineBrokenText>
            {this.props.comment.length > 85 ? (
              <div className={cx('field__comment-ellipsis')}>&hellip;</div>
            ) : null}
          </div>
          <CommentInput
            ref={(comment_input) => this.comment_input = comment_input}
            update_comment={this.quit_edit_mode}
            />
        </div>
      </Field>
    )
  }
}

class CommentInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      comment: "",
    }
    this.update_comment = this.update_comment.bind(this)
  }

  update_comment(comment) {
    if (comment != this.state.comment) {
      this.setState({comment})
    }
  }

  focus() {
    this.input.focus()
  }

  render() {
    return (
      <textarea
        rows={3}
        cols={30}
        ref={(input) => this.input = input}
        type="text"
        className={cx('field__comment-input')}
        onChange={(event) => {
          let comment = event.target.value
          this.update_comment(comment)
        }}
        onBlur={() => this.props.update_comment(this.state.comment)}
        value={this.state.comment}
        ></textarea>
    )
  }
}

CommentField.defaultProps = {
  name: "",
  show_label: true,
  display_only: false,
  ellipsis: false,
  on_submit_comment: (comment) => {},
  editable: true,
  edit_mode: 'hover',
  comment: "",
}

export default CommentField