import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Grid, Row, Col, ListGroup, ListGroupItem, Button } from 'react-bootstrap';
import moment from 'moment';
import '../App.css';
import Navbar from './Navbar';
import * as sessionsActions from '../actions/sessionsActions';

class Sessions extends Component {

  createNewSession = () => {
    const result = this.props.actions.createNewSession();
    // FIXME Feels ugly, change location after state has changed?
    this.props.history.push('/sessions/' + result.session.id)
  }

  render() {
    return (
      <div>
        <Navbar history={this.props.history} />
        <Grid fluid>
          <Row>
            <Col md={6} mdOffset={3}>
              <ListGroup>
                {this.props.sessions.map((session) =>
                  <ListGroupItem
                    key={session.id}
                    onClick={() => this.props.history.push('/sessions/' + session.id)}>
                    {session.title || 'No title'} {session.id} {moment(session.date).format('DD/MM/YYYY')}
                  </ListGroupItem>
                )}
              </ListGroup>
              <Button bsStyle="success" onClick={this.createNewSession}>Create new session</Button>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

function mapStateToProps(state, props) {
  return {
    currentSession: state.get('currentSession'),
    sessions: state.get('sessions')
  };
}

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

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