import React, { Component } from 'react';

import { connect } from 'react-redux';

import { Panel, ListGroup, ListGroupItem } from 'react-bootstrap';

import _ from 'lodash';

import '../App.css';

class SessionSummary extends Component {

  render() {

    return (

      <Panel>

        <ListGroup>

          {this.props.notes.map((note) =>

            <ListGroupItem key={note.get('_id')}>

              <a href={'#note-' + note.get('_id')}>

                <span className="text-muted">{note.startedAt} → {note.finishedAt}</span>

                <span className="pull-right">{_.words(note.plain).length} words</span>

              </a>

            </ListGroupItem>

          )}

        </ListGroup>

      </Panel>

    );

  }

}

function mapStateToProps(state, props) {

  return props;

}

export default connect(mapStateToProps)(SessionSummary);