# @cjsx React.DOM 
$ = require('jquery')
React = require('react/addons')
Modal = require('react-bootstrap/lib/Modal')
Button = require('react-bootstrap/lib/Button')

module.exports = React.createClass
  mixins: [React.addons.LinkedStateMixin]

  displayName: 'EditTag'

  getInitialState: ()->
    updating: false
    name: @props.tag.get('name')
    errors: false
    shaking: false

  onChangeName: (event)->
    @setState name: event.target.value

  onClickOk: (event)->
    event.preventDefault()
    @setState updating: true
    attributes = {new_name: @state.name}
    @props.tag.save attributes,
      success: ()=>
        @props.tag.set 'name', @state.name
        @props.onRequestHide()
      error: (model, response, options)=>
        @setState errors: response.responseJSON.tag.errors
        @setState updating: false
        @setState shaking: true
        setTimeout (=> @setState shaking: false), 300

  render: ->
    <Modal className={"animated infinite shake" if @state.shaking} {...@props} bsStyle='default' title={<i className="glyphicon glyphicon-edit" />} animation={false}>
      <div className='modal-body'>
        {
          if @state.errors
            <div className="alert alert-danger" role="alert">
              <ul>
                {
                  for key, errors of @state.errors
                    for error in errors
                      <li>{key + ' ' + error}</li>
                }
              </ul>
            </div>
        }
        <div className="form-group">
          <label className="control-label">Name</label>
          <input type="text" className="form-control" value={@state.name} onChange={@onChangeName} disabled={@state.updating} id="inputError1" />
        </div>
        <div className="form-group">
          <button className="btn btn-default pull-right" onClick={@onClickOk} disabled={@state.updating}>
            &nbsp;
            OK
            &nbsp;
            {
              if @state.updating
                <i className='glyphicon glyphicon-refresh glyphicon-refresh-animate' />
            }
          </button>
        </div>
      </div>
    </Modal>