import _                                  from 'lodash';
import { Meteor }                         from 'meteor/meteor';

import React, { Component }               from 'react';
import { Link,browserHistory }            from 'react-router';
import { FormGroup,Panel,Table,
  ButtonToolbar,Modal,
  FormControl,Glyphicon,Button }          from 'react-bootstrap';
  import { AddStudentForm }               from './addStudentForm';
import {moment}                           from 'meteor/momentjs:moment'

export class StudentTable extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.onUpdate = this.onUpdate.bind(this);
  };
  onUpdate(key, value) {
    this.setState({[key]: value});
  };

  render() {
    return (
      <div className="panel panel-flat">
        <div className="panel-heading">
          <h5 className="panel-title">Student Details</h5>
          <div className="heading-elements">
            <ul className="icons-list">
              <li><a data-action="collapse"></a></li>
              <li><a data-action="reload"></a></li>
            </ul>
          </div>
        </div>
        <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Class</th>
              <th>DOB</th>
              <th>Status</th>
              <th className="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {
              this.props.students.map(function(student, i)
                {
                  return(
                    <tr key={i}>
                      <td>{student.firstName}</td>
                      <td>{student.lastName}</td>
                      <td>{student.class}</td>
                      <td>{student.dob? moment(student.dob).format("LL") : <span></span>}</td>
                      <td><span className="label label-success">Active</span></td>
                      <td className="text-center">
                        <ul className="icons-list">
                          <li className="dropdown">
                            <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                              <i className="icon-menu9"></i>
                            </a>
                            <ul className="dropdown-menu dropdown-menu-right">
                              <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
                              <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
                              <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
                            </ul>
                          </li>
                        </ul>
                      </td>
                  </tr>
                )
              })
            }
          </tbody>
        </Table>
      </div>
    );
  };

};