class StepOne extends Component {
  static getDerivedStateFromProps = (nextProps, prevState) => {
    const {
      stepOne: { name, location, description }
    } = nextProps;
    const shouldUpdate = name === prevState.name || prevState.name === '';
    return shouldUpdate ? { name } : null;
  };

  state = {
    name: '',
    location: '',
    description: ''
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleNext = (e) => {
    e.preventDefault();
    const { name, description, location } = this.state;
    this.props.setStepOne({ name, location, description });
  };

  render() {
    return (
      <Col xs={{ size: 8, offset: 2 }}>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='name'>
            Name
          </label>
          <input
            className='form-input'
            placeholder='Whats the conference name?'
            id='name'
            name='name'
            defaultValue={this.props.stepOne.name !== '' ? this.props.stepOne.name : null}
            value={this.state.name}
            onChange={this.handleChange}
          />
        </Col>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='location'>
            Location
          </label>
          <input
            className='form-input'
            placeholder='Where is the conference located?'
            id='location'
            name='location'
            value={this.state.location}
            onChange={this.handleChange}
          />
        </Col>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='description'>
            Description
          </label>
          <input
            className='form-input'
            placeholder='Tell us something more about the conference...'
            type='textarea'
            id='description'
            name='description'
            value={this.state.description}
            onChange={this.handleChange}
          />
        </Col>
        <div
          style={{
            width: '100%',
            position: 'fixed',
            bottom: '0px',
            zIndex: '100',
            textAlign: 'center',
            padding: '10px',
            left: '0px'
          }}
        >
          <NextButton handleClick={this.handleNext} />
        </div>
      </Col>
    );
  }
}