import React, {Component} from 'react'
import classNames from 'classnames/bind'
import Button from 'components/utils/button'

const cx = classNames.bind(require('../../styles/popovers.scss'))

class DeleteField extends Component {
  constructor(props) {
    super(props)
    this.state = {
      field_name: "",
    }
    this.onChange = this.onChange.bind(this)
  }

  componentDidMount() {
    this.field_name_input.focus()
  }

  onChange({target: {value: field_name}}) {
    this.setState({field_name})
  }

  render() {
    return (
      <div className={cx('popovers', 'popovers_constrained')}>
        <p>Attention, la suppression du champ et de toutes les données associées est définitive. Veuillez confirmer que vous souhaitez supprimer le champ en saisissant le nom du champ ci-dessous.</p>
        <input
          ref={(field_name_input) => this.field_name_input = field_name_input}
          type="text"
          placeholder="Nom du champ"
          className={cx('popovers__delete-field-input')}
          value={this.state.field_name}
          onChange={this.onChange}
          />
        <div className={cx('popovers__delete-field-button')}>
          <Button
            disabled={this.state.field_name.trim() !== this.props.field.name.trim()}
            onClick={this.props.on_delete}
            >
            Confirmer la suppression du champ
          </Button>
        </div>
      </div>
    )
  }
}

export default DeleteField