define [
  "jquery",
  "lodash",
  "bootstrap.daterangepicker",
  "react",
  "react.select"], ($, _, daterangepicker, React, Select) ->

    class SprintDetailView extends React.Component

      {div, button, span, select, input, form, i, label} = React.DOM
      ReactSelect = console.log React.createElement(Select, {})

      constructor: (props) ->
        console.log div, ReactSelect
        super props
        @state =
          sprintName: props.data.sprintName

      changeSprintName: (event)=>
        this.setState
          sprintName: event.target.value

      sprintName: =>
        div
          className:"form-group",
          label
            key:0
            htmlFor:"inputName"
            className:"col-lg-2 col-sm-2 control-label",
            this.props.labels.sprintName
          div
            key:1
            className:"col-lg-10"
            ,
            input
              className:"form-control"
              value: this.state.sprintName
              onChange: @changeSprintName

      changeSprintName: (event)=>
        this.setState
          sprintDuration: event.target.value

      sprintDuration: =>
        div
          className:"form-group",
          label
            key:0
            htmlFor:"inputName"
            className:"col-lg-2 col-sm-2 control-label",
            this.props.labels.sprintName
          div
            key:1
            className:"col-lg-10"
            ,
            ReactSelect

      render: =>
        form
          className:"form-horizontal"
          role: "form"
          @sprintName()
          @sprintDuration()


    props =
      labels:
        sprintName:"Nombre"
        sprintStartDate:"Start Date"
        sprintEndDate:"End Date"
        sprintDuration:"Duration"
      data:
        sprintName: "ok"


component = React.createElement(SprintDetailView, props)
React.render(component, document.body)