import React, { PureComponent } from 'react';
import ReactGA from '../../src';

export default class Events extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      category: '',
      action: '',
      label: ''
    };
  }

  setValue = (key, event) => {
    this.setState({
      [key]: event.target.value
    });
  };

  sendEvent = (event) => {
    event.preventDefault();
    ReactGA.event(this.state);
    this.setState({
      category: '',
      action: '',
      label: ''
    });
  };

  render() {
    const { category, action, label } = this.state;
    return (
      <form onSubmit={this.sendEvent}>
        <h2>Events</h2>
        <p>Enter in details below to trigger an ReactGA.event call</p>
        <div>
          category <input value={category} onChange={this.setValue.bind(this, 'category')} />
        </div>
        <div>
          action <input value={action} onChange={this.setValue.bind(this, 'action')} />
        </div>
        <div>
          label <input value={label} onChange={this.setValue.bind(this, 'label')} />
        </div>
        <button type="submit">
          Send Event.
        </button>
      </form>
    );
  }
}