import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button } 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';

class Session extends Component {

  saveSession = () => {

    const title = this.title.value;

    const description = this.description.value;

    this.props.sessionsActions.updateSession(this.props.currentSession, {

      title: title,

      description: description

    });

  }

  render() {

    return (

      <div>

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

        <Grid fluid>

          <Row>

            <Col md={3}>

              <Panel>

                <form>

                  <FormGroup>

                    <ControlLabel>Title</ControlLabel>

                    <FormControl

                      type="text"

                      defaultValue={this.props.currentSession.title}

                      placeholder="Enter a title for this session"

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

                    />

                  </FormGroup>

                  <FormGroup>

                    <ControlLabel>Description</ControlLabel>

                    <FormControl

                      componentClass="textarea"

                      defaultValue={this.props.currentSession.description}

                      placeholder="Enter a description for this session"

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

                    />

                  </FormGroup>

                  <Button bsStyle="primary" onClick={this.saveSession}>Save session</Button>

                </form>

              </Panel>

            </Col>

            <Col md={9}>

              <NotesList notes={this.props.notes} />

              <hr />

              <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />

            </Col>

          </Row>

        </Grid>

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

  const notesBySession = notes.filter(note => note.session === sessionId);

  return {

    currentSession: currentSession,

    sessions: sessions,

    notes: notesBySession

  };

}

function mapDispatchToProps(dispatch) {

  return {

    sessionsActions: bindActionCreators(sessionsActions, dispatch),

    notesActions: bindActionCreators(notesActions, dispatch),

  }

}

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