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';

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} />

              <form>

                    name="firstname"

                    defaultValue={ firstname }

                  />

                    name="lastname"

                    defaultValue={ lastname }

                  />

              </form>

      </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);