import React, {Component} from 'react';
import {Jumbotron, Button, Input} from 'react-bootstrap';
import Project from '../components/Project';
import TitleBar from '../components/TitleBar';
import ProjectModel from '../models/ProjectModel';

export default class ProjectList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
      createErrorMsg: '',
      openCreateProject: false
    };

    this.handleSuccess = this.handleSuccess.bind(this);
    this.handleFail = this.handleFail.bind(this);
    this.handleCreateProject = this.handleCreateProject.bind(this);
    this.handleCreateSuccess = this.handleCreateSuccess.bind(this);
    this.handleCreateFail = this.handleCreateFail.bind(this);
  }
  componentWillMount() {
    ProjectModel.getProjects(this.handleSuccess, this.handleFail);
  }

  handleSuccess(projects) {
    this.setState({
      projects: projects
    });
  }

  handleFail() {
  }

  handleCreateProject() {
    const name = this.refs.projectName.getValue();
    const project = {name: name};

    ProjectModel.createProject(project, this.handleCreateSuccess, this.handleCreateFail);
  }

  handleCreateSuccess(data) {
    let projects = this.state.projects;
    projects.unshift(data);

    this.setState({
      projects: projects,
      createErrorMsg: ''
    });
  }

  handleCreateFail() {
    this.setState({
      createErrorMsg: 'Oops! Try again!'
    });
  }

  render() {
    let projectList;

    if (!this.state.projects.length) {
      projectList = (<div className="empty-project-list">目前尚無任何專案！</div>);
    } else {
      projectList = this.state.projects.map(project => {
        return (
          <div key={project.id}>
            <Project projectName={project.name} projectId={project.id} projectTime="2015/03/23" />
          </div>
        );
      });
    }

    return (
      <div>
        <TitleBar />
        <div className="container project-list">
          <h1>專案列表</h1>
          <Jumbotron>
            <p>由此開始建立新專案</p>
            <div>
              <Input type="text"
                ref="projectName"
                className="input-project-name"
                help={this.state.createErrorMsg}
                placeholder="請輸入專案名稱" />
              <Button bsStyle="primary" className="start-create-project" onClick={this.handleCreateProject}>建立</Button>
            </div>

          </Jumbotron>
          {projectList}
        </div>
      </div>
    );
  }
}

Project.defaultProps = {
  projects: [],
  editMode: false
};

@@ -968,19 +968,52 @@
 Project(
-) %7B
+event) %7B%0A    event.preventDefault();
 %0A    con
@@ -1052,24 +1052,61 @@
 getValue();%0A
+    if (!name) %7B%0A      return;%0A    %7D%0A
     const pr
@@ -2095,27 +2095,64 @@
            %3C
-div
+form onSubmit=%7Bthis.handleCreateProject%7D
 %3E%0A          
@@ -2367,16 +2367,47 @@
 %3CButton 
+type=%22submit%22 %0A                
 bsStyle=
@@ -2415,16 +2415,32 @@
 primary%22
+%0A               
  classNa
@@ -2468,46 +2468,43 @@
 ect%22
- onClick=%7Bthis.handleCreateProject%7D%3E%E5%BB%BA%E7%AB%8B
+%3E%0A                %E5%BB%BA%E7%AB%8B%0A              
 %3C/Bu
@@ -2523,19 +2523,20 @@
       %3C/
-div
+form
 %3E%0A%0A     

fix allow to create project with empty name