import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import '../App.css';

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

import _ from 'lodash';

class SessionForm extends Component {

  onChange = (e) => {

    const { name, value } = e.target;

    const changes = { [name]: value }

    this.onChangeThrottle(changes);

  }

  onChangeThrottle = _.debounce((changes) => {

    this.props.sessionsActions.updateSession(this.props.currentSession, changes);

  }, 750)

  render() {

    if (!this.props.currentSession) {

      return (

        <form></form>

      )

    }

    return (

      <Panel>

        <form onSubmit={ e => { e.preventDefault() } }>

          <FormGroup>

            <ControlLabel>Title</ControlLabel>

            <FormControl

              name="title"

              defaultValue={ this.props.currentSession.title }

              onChange={ this.onChange }

              type="text"

              placeholder="Enter a title for this session"

              inputRef={ ref => { this.title = ref; } }

            />

          </FormGroup>

          <FormGroup>

            <ControlLabel>Description</ControlLabel>

            <FormControl

              name="description"

              componentClass="textarea"

              defaultValue={ this.props.currentSession.description }

              onChange={ this.onChange }

              placeholder="Enter a description for this session"

              inputRef={ ref => { this.description = ref; } }

            />

          </FormGroup>

        </form>

      </Panel>

    );

  }

}

function mapStateToProps(state, props) {

  return {

    currentSession: props.session,

  };

}

function mapDispatchToProps(dispatch) {

  return {

    sessionsActions: bindActionCreators(sessionsActions, dispatch),

  }

}

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