import React, { PropTypes, Component } from 'react'
import { get } from 'lodash'
import { RIETextArea } from 'riek'
import Util from '../../Metamaps/Util'

class MdTextArea extends RIETextArea {
  renderNormalComponent = () => {
    const value = this.state.newValue || this.props.value

    // defaultProps MUST use dangerouslySetInnerHTML
    return <span tabIndex="0"
      className={this.makeClassString()}
      onFocus={this.startEditing}
      onClick={this.startEditing}
      {...this.props.defaultProps}
    />
  }
}

class Desc extends Component {
  render = () => {
    const descHTML = (this.props.desc === '' && this.props.authorizedToEdit)
      ? '<p.Click to add description...</p>'
      : Util.mdToHTML(this.props.desc)

    const htmlSpan = <span dangerouslySetInnerHTML={{ __html: descHTML }} />

    return (
      <div className="scroll">
        <div className="desc">
          <MdTextArea value={this.props.desc}
            propName="desc"
            change={this.props.onChange}
            className="riek_desc"
            classEditing="riek-editing"
            editProps={{
              onKeyPress: e => {
                const ENTER = 13
                if (e.shiftKey && e.which === ENTER) {
                  e.preventDefault()
                  this.props.onChange({ desc: e.target.value })
                }
              }
            }}
            defaultProps={{
              dangerouslySetInnerHTML: { __html: descHTML }
            }}
          />
          <div className="clearfloat"></div>
        </div>
      </div>
    )
  }
}

Desc.propTypes = {
  desc: PropTypes.string, // markdown
  authorizedToEdit: PropTypes.bool,
  onChange: PropTypes.func
}

export default Desc