import React from 'react';

class MenuItem extends React.Component {
  constructor(props) {
    super(props);

    const item = props.item || {};

    this.state = {
      label: item.label || '',
      url: item.url || '',
      index: props.index
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange({ target }) {
    this.setState({ [target.name]: target.value }, () => {
      this.props.onChange(this.state.index, {
        label: this.state.label,
        url: this.state.url
      });
    });
  }

  renderLabel() {
    return (
      <div className="field">
        <label htmlFor="menu-item-label">Link Text</label>
        <input type="text" name="label" id="menu-item-label" value={this.state.label} className="input-text" onChange={this.handleInputChange}/>
      </div>
    );
  }

  renderUrl() {
    return(
      <div className="field">
        <label htmlFor="menu-item-url">Url</label>
        <input type="text" name="url" id="menu-item-url" value={this.state.url} className="input-text" onChange={this.handleInputChange}/>
      </div>
    );
  }

  render() {
    return (
      <div className="box-content">
        <div className="columns">
          <div className="column-12 column-mobile-6">{this.renderLabel()}</div>
          <div className="column-12 column-mobile-6">{this.renderUrl()}</div>
        </div>
      </div>
    )
  }
}

export default MenuItem;
