import React from 'react';
import T from 'prop-types';

class Form extends React.Component {
  static propTypes = {
    onSubmit: T.func.isRequired,
    children: T.func.isRequired,
  };

  constructor(props, ...rest) {
    super(props, ...rest);
    this.state = { input: props.values || {} };
  }

  handleChange = evt => {
    evt.preventDefault();
    const { id, name, value } = evt.target;
    this.setState(({ input }) => ({
      input: { ...input, [name || id]: value },
    }));
  };

  handleSubmit = evt => {
    evt.preventDefault();
    this.props.onSubmit({ values: this.state.input });
  };

  render() {
    const { children, onSubmit, ...rest } = this.props;

    return (
      <form onSubmit={this.handleSubmit} {...rest}>
        {children({ onChange: this.handleChange, ...this.state, ...rest })}
      </form>
    );
  }
}

export default Form;