import React from 'react';
import Accordion from '../shared/Accordion';

import { connect } from 'react-redux';
import { logout } from '../../../actions/auth';

class Profile extends React.Component {
  constructor(props) {
    super(props);

    const { auth: { user } } = props;

    this.state = {
      first_name: user.first_name,
      last_name: user.last_name,
      email: user.email,
    };

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

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

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

  handleLogout() {
    this.props.logout();
  }

  render () {
    return (
      <React.Fragment>
        <div className="title title-action">
          <button type="button" className="btn-blue" onClick={this.handleLogout}>Logout</button>
          <div>
            <h1>Profile</h1>
            <p>Set up your personal options</p>
          </div>
        </div>

        <div className="box box-card">
          <div className="box-content">
            <div className="columns">
              <div className="column-6">
                <div className="field field-info">
                  <h3 className="field-info-title">Your name</h3>
                  <p className="field-info-text">In order to be recognizable among your team members user your real name.</p>
                </div>
              </div>
              <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 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>
            <hr/>
            <div className="columns">
              <div className="column-6">
                <div className="field field-info">
                  <h3 className="field-info-title">Your email address</h3>
                  <p className="field-info-text">Your email address will be used for account-related notifications and can be used for password resets.</p>
                </div>
              </div>
              <div className="column-6">
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input type="email" name="email" value={this.state.email} id="email" className="input-text" placeholder="john@doe.com" onChange={this.handleInputChange}/>
                </div>
              </div>
            </div>
          </div>

          <div className="box-footer">
            <button className="btn btn-blue">Save</button>
          </div>
        </div>

        <Accordion title="Change your password" desc="You can change your password for security reasons">
          <div className="box-content">
            <div className="columns">
              <div className="column-6">
                <div className="field field-info">
                  <h3 className="field-info-title">Password Change</h3>
                  <p className="field-info-text">For better security, make sure your password has at least 15 characters OR at least 8 characters including a number and a lowercase letter.</p>
                </div>
              </div>
              <div className="column-6">
                <div className="field">
                  <label htmlFor="old-password">Old Password</label>
                  <input type="password" name="old-password" id="old-password" className="input-text"/>
                </div>
                <div className="field">
                  <label htmlFor="new-password">New Password</label>
                  <input type="password" name="new-password" id="new-password" className="input-text"/>
                </div>
                <div className="field">
                  <label htmlFor="confirm-new-password">Confirm New Password</label>
                  <input type="password" name="confirm-new-password" id="confirm-new-password" className="input-text"/>
                </div>
              </div>
            </div>
          </div>
          <div className="box-footer">
            <button className="btn btn-blue">Update password</button>
          </div>
        </Accordion>
      </React.Fragment>
    );
  }
}

export default connect(
  (state) => ({ auth: state.auth }),
  { logout }
)(Profile)
