import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
import '../App.css';
import Navbar from './Navbar';
import NoteInput from './NoteInput';
import NotesList from './NotesList';
import * as sessionsActions from '../actions/sessionsActions';
import * as notesActions from '../actions/notesActions';
import _ from 'lodash';

class Session 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)

  componentDidMount = () => {
    this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id });
  }

  renderForm() {

    if (!this.props.currentSession) {
      return (
        <form></form>
      )
    }

    return (
      <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>
    );
  }

  render() {
    return (
      <div>
        <Navbar history={this.props.history} />
        <div className="session-container">
          <Grid fluid className="session-notes">
            <Row>
              <Col md={3}>
                <Panel>
                  { this.renderForm() }
                </Panel>
              </Col>
              <Col md={9}>
                <NotesList notes={this.props.notes} />
              </Col>
            </Row>
          </Grid>
          <section className="editor-fixed">
            <Grid fluid>
              <Row>
                <Col md={9} mdOffset={3}>
                  <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />
                </Col>
              </Row>
            </Grid>
          </section>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, props) {

  const sessionId = props.match.params.id;

  const sessions = state.get('sessions');
  const notes = state.get('notes');
  const currentSession = sessions.find(session => session._id === sessionId);

  return {
    currentSession,
    sessions,
    notes,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    sessionsActions: bindActionCreators(sessionsActions, dispatch),
    notesActions: bindActionCreators(notesActions, dispatch),
  }
}

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