import React from 'react';
import {  Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { install } from '../../../actions/site';

class InstallWizard extends React.Component {
  state = {
    site_name: '',
    email: '',
    first_name: '',
    last_name: '',
    password: '',
    password_confirmation: '',
  };

  constructor(props) {
    super(props);

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

  handleInputChange({ target }) {
    const value = target.type === 'checkbox' ? target.checked : target.value;

    this.setState({
      [target.name]: value
    });
  }

  handleSubmit() {
    this.props.install({
      site_name: this.state.site_name,
      email: this.state.email,
      first_name: this.state.first_name,
      last_name: this.state.last_name,
      password: this.state.password,
    })
  }

  render () {
    if (this.props.site.installed) {
      return <Redirect to="/" />
    }

    return (
      <div className="box box-card box-center">
        <div className="box-header">
          <h1 className="box-title">Installation wizard</h1>
          <p className="box-subtitle">Let's set up your site!</p>
        </div>

        <div className="box-content">
          <div className="field">
            <label htmlFor="site_name">Site name</label>
            <input type="text" name="site_name" value={this.state.site_name} id="site_name" className="input-text" placeholder="My Awesome Site" onChange={this.handleInputChange} />
          </div>

          <div className="columns">
            <div className="column-6">
              <div className="field">
                <label htmlFor="first_name">First name</label>
                <input type="text" name="first_name" value={this.state.first_name} id="first_name" className="input-text" placeholder="John" onChange={this.handleInputChange} />
              </div>
            </div>
            <div className="column-6">
              <div className="field">
                <label htmlFor="last_name">Last name</label>
                <input type="text" name="last_name" value={this.state.last_name} id="last_name" className="input-text" placeholder="Doe" onChange={this.handleInputChange} />
              </div>
            </div>
          </div>

          <div className="field">
            <label htmlFor="email">Email</label>
            <input type="email" name="email" value={this.state.email} id="email" className="input-text" placeholder="john@example.com" onChange={this.handleInputChange} />
          </div>

          <div className="columns">
            <div className="column-6">
              <div className="field">
                <label htmlFor="password">Password</label>
                <input type="password" name="password" value={this.state.password} id="password" className="input-text" placeholder="Minimum 8 characters" onChange={this.handleInputChange} />
              </div>
            </div>
            <div className="column-6">
              <div className="field">
                <label htmlFor="password_confirmation">Confirm password</label>
                <input type="password" name="password_confirmation" value={this.state.password_confirmation} id="password_confirmation" className="input-text" placeholder="Minimum 8 characters" onChange={this.handleInputChange} />
              </div>
            </div>
          </div>
        </div>

        <div className="box-footer">
          <button className="btn btn-blue" onClick={this.handleSubmit}>Create site!</button>
        </div>
      </div>
    );
  }
}

export default connect(
  (state) => ({ site: state.site }),
  { install },
)(InstallWizard)
