var AppActions = require('../actions/AppActions');
var Projects = require('../stores/Projects');
var React = require('react');
var ReactBootstrap = require('react-bootstrap');

var Button = ReactBootstrap.Button;
var Glyphicon = ReactBootstrap.Glyphicon;
var ListGroup = ReactBootstrap.ListGroup;
var ListGroupItem = ReactBootstrap.ListGroupItem;
var Nav = ReactBootstrap.Nav;
var Navbar = ReactBootstrap.Navbar;
var NavItem = ReactBootstrap.NavItem;
var Panel = ReactBootstrap.Panel;

var ProjectItem = React.createClass({

  render: function() {
    return (
      <div className="project-item" onClick={this.openProject}>
        <h5>{this.props.project.name}</h5>
        <p>{this.props.project.description || ""}</p>
        <br/>
      </div>
    );
  },

  openProject: function() {
    AppActions.changeLocation({ project: this.props.project });
  }
});

var ProjectList = React.createClass({

  getInitialState: function() {
    return {
      // listType should be 'my' or 'all'
      listType: 'my',
      myProjects: [],
      allProjects: []
    }
  },

  componentDidMount: function() {
    Projects.addMyProjectsLoadedListener(this.handleMyLoaded);
    Projects.addAllProjectsLoadedListener(this.handleAllLoaded);

    this.handleListSelect(this.state.listType);
  },

  componentWillUnmount: function() {
    Projects.removeMyProjectsLoadedListener(this.handleMyLoaded);
    Projects.removeAllProjectsLoadedListener(this.handleAllLoaded);
  },

  render: function() {
    var list = <p> No projects! </p>;

    var projects = null;
    if (this.state.listType == 'my') {
      projects = this.state.myProjects;
    } else {
      projects = this.state.allProjects;
    }

    if (projects.length > 0) {
      projects.sort(function(a, b) { return a.name.localeCompare(b.name); });
      list = (
          projects.map(function(project, index) {
            return <ProjectItem key={project.id} project={project} />;
          })
      );
    }

    return (
      <Panel>
        <Nav right style={{"maxHeight": "41px"}}>
          <Button bsStyle="link" right onClick={this.handleCreateNew}>
            <Glyphicon glyph='plus' /> Create New Project
          </Button>
        </Nav>
        <Nav bsStyle='tabs' activeKey={this.state.listType} onSelect={this.handleListSelect}>
          <NavItem eventKey={'my'}>My Projects</NavItem>
          <NavItem eventKey={'all'}>All Projects</NavItem>
        </Nav>
        { list }
      </Panel>
    )
  },

  handleListSelect: function(listType) {
    if (listType == 'my') {
      AppActions.listMyProjects();
    } else {
      AppActions.listAllProjects();
    }
  },

  handleMyLoaded: function(projects) {
    if (projects) {
      this.setState({ listType: 'my', myProjects: projects });
    }
  },

  handleAllLoaded: function(projects) {
    if (projects) {
      this.setState({ listType: 'all', allProjects: projects });
    }
  },

  handleCreateNew: function() {
    AppActions.changeLocation({ createProject: true });
  }
});

module.exports = ProjectList;