import { Component } from 'react'
import cx from 'classnames'
import factory from './factory'

export default class Input extends Component {
  constructor(props) {
    super()

    this.state = {
      value: props.property.value,
    }
  }

  componentWillReceiveProps(nextProps) {
    const currentValue = this.props.property.value
    const nextValue = nextProps.property.value

    if (nextValue != currentValue) {
      this.setState({
        value: nextValue,
      })
    }
  }

  render() {
    const Element = factory(this.props.property)

    return (
      <div
        className={cx('ct-element', `ct-${this.props.property.type.replace(/\[\]/,'-list')}-element`)}>
        <label className='ct-element-label' htmlFor={this.props.property.name}>
          {this.props.property.title}
        </label>
      <Element
        className={cx({
          'ct-input-invalid': this.props.property.errors.length,
        })}
        errors={this.props.property.errors.join('<br>')}
        property={this.props.property}
        onCommit={value => this.update(value)}
        onUpdate={value => this.setState({ value }) }
        onSave={value => this.persist({ value }) }
        onDeleteItem={item => this.deleteItem(item) }
        value={this.state.value} />
      </div>
    )
  }

  deleteItem(item) {
    const { property } = this.props
    this.props.api.deleteItem(property.links, item)
  }

  update(value) {
    if (value === undefined) {
      value = this.state.value
    }
    else {
      this.setState({ value })
    }
    this.persist(value)
  }

  persist(value) {
    const { property, config } = this.props

    if (property.value !== value) {
      this.props.api.update(
      	property.links,
      	property.id,
      	value,
      	property.name,
        config)
    }
  }
}

@@ -750,17 +750,16 @@
 ty.name%7D
-%3E
 %0A       
@@ -761,17 +761,51 @@
         
-%7B
+dangerouslySetInnerHTML=%7B%7B __html: 
 this.pro
@@ -825,25 +825,13 @@
 itle
-%7D%0A        %3C/label
+ %7D%7D /
 %3E%0A  

Allow html content in label