// @flow

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer, reduxForm } from 'redux-form';

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { domOnlyProps } from './redux_form';

const reducers = {
  form: formReducer,
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);

type Props = {
  fields: Object,
  handleSubmit: Function
};

type State = {
};

let ContactForm = class extends Component<Props, State> {
  render() {
    const {
      fields: { firstName, lastName, email },
      handleSubmit,
    } = this.props;

    return (
      <div className="app">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React with Redux-Form</h1>
        </header>

        <form className="App-intro" onSubmit={handleSubmit}>
          <div>
            <label htmlFor="first">First name</label>
            <input id="first" type="text" placeholder="First Name" autoComplete="given-name" {...domOnlyProps(firstName) } />
          </div>
          <div>
            <label htmlFor="last">Last name</label>
            <input id="last" type="text" placeholder="Last Name" autoComplete="family-name" {...domOnlyProps(lastName) } />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <input id="email" type="email" placeholder="Email" autoComplete="email" {...domOnlyProps(email) } />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
};

ContactForm = reduxForm({
  form: 'contact', // unique name for this form
  fields: [
    'firstName',
    'lastName',
    'email',
  ],
  store,
})(ContactForm);

export default ContactForm;