import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import '../App.css';

import Navbar from './Navbar';

import * as userActions from '../actions/userActions';

import './Settings.css';

class Settings extends Component {

  updateSettings = () => {

    const username = this.props.currentUser.username;

    const firstname = this.firstname.value;

    const lastname = this.lastname.value;

    this.props.userActions.updateSettings(username, firstname, lastname);

  }

  render() {

    const firstname = this.props.currentUser ? this.props.currentUser.first_name : '';

    const lastname = this.props.currentUser ? this.props.currentUser.last_name : '';

    return (

      <div>

        <Navbar history={this.props.history} />

        <div className="container-fluid">

          <div className="row">

            <div className="col-lg-6 offset-md-3">

              <form>

                <div className="form-group">

                  <label className="col-form-label text-primary">Prénom</label>

                  <input className="form-control bg-danger text-muted"

                    name="firstname"

                    defaultValue={ firstname }

                    placeholder="Entrez un prénom"

                    ref={(firstname) => { this.firstname = firstname; }}

                  />

                </div>

                <div className="form-group">

                  <label className="col-form-label text-primary">Nom</label>

                  <input className="form-control bg-danger text-muted"

                    name="lastname"

                    defaultValue={ lastname }

                    placeholder="Entrez un nom"

                    ref={(lastname) => { this.lastname = lastname; }}

                  />

                </div>

              </form>

              <button type="submit" className="btn btn-primary btn-lg text-secondary" onClick={this.updateSettings}>Enregistrer</button>

            </div>

          </div>

        </div>

      </div>

    );

  }

}

function mapStateToProps(state, props) {

  return {

    currentUser: state.getIn(['authStatus', 'currentUser']),

  };

}

function mapDispatchToProps(dispatch) {

  return {

    userActions: bindActionCreators(userActions, dispatch)

  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Settings);