import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Panel, ListGroup, ListGroupItem } from 'react-bootstrap';
import _ from 'lodash';
import '../App.css';
import {formatTimestamp} from '../utils';

class SessionSummary extends Component {
  render() {
    return (
      <ListGroup>
        {this.props.notes.map((note) =>
          <ListGroupItem key={note.get('_id')}>
            <a href={'#note-' + note.get('_id')}>
              <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
              <span className="pull-right">{_.words(note.plain).length} words</span>
            </a>
          </ListGroupItem>
        )}
      </ListGroup>
    );
  }
}

function mapStateToProps(state, props) {
  return props;
}

export default connect(mapStateToProps)(SessionSummary);