# @cjsx React.DOM $ = require('jquery') React = require('react/addons') Modal = require('react-bootstrap/lib/Modal') Button = require('react-bootstrap/lib/Button') Glyphicon = require('react-bootstrap/lib/Glyphicon') TagsInput = require('react-tagsinput') CardModel = require('../models/card')

module.exports = React.createClass

mixins: [React.addons.LinkedStateMixin]

displayName: 'Edit'

getInitialState: ()->
  updating: false
  title: @props.card.get('title')
  content: @props.card.get('content')
  tags: @props.card.get('tags') || []
  errors: false
  shaking: false
  dontCloseDialog: false
  createSuccess: false

onChangeTitle: (event)->
  @setState title: event.target.value

onChangeContent: (event)->
  @setState content: event.target.value

onChangeDontCloseDialog: (event)->
  @setState dontCloseDialog: !@state.dontCloseDialog

onClickOk: (event)->
  event.preventDefault()
  @setState updating: true
  if @props.card.isNew()
    attributes = {title: @state.title, content: @state.content, tags: @state.tags}
  else
    attributes = {new_title: @state.title, content: @state.content, tags: @state.tags}
  @props.card.save attributes,
    success: ()=>
      @setState updating: false
      if @props.card.isNew()
        if @state.dontCloseDialog
          @setState
            createSuccess: true
            errors: null
            title: ''
            content: ''
            tags: []
          @props.card = new CardModel()
          @props.card._isNew = true
        else
          @props.onRequestHide()
          @props.card.set 'title', @state.title
          location.hash = '/' + encodeURIComponent(@state.title)
      else
        @props.onRequestHide()
        @props.card = new CardModel()
        @props.card._isNew = true
    error: (model, response, options)=>
      @setState errors: response.responseJSON.card.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={if @props.card.isNew() then <Glyphicon glyph='plus' /> else <Glyphicon glyph='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>
        else if @state.createSuccess
          <div className="alert alert-success" role="alert">
            <Glyphicon glyph='info-sign' />&nbsp;
            You created a card successfully. Let's create next one.
          </div>
      }
      <div className="form-group">
        <label class="control-label">Title</label>
        <input type="text" className="form-control" value={@state.title} onChange={@onChangeTitle} disabled={@state.updating} id="inputError1" />
      </div>
      <div className="form-group">
        <label class="control-label">Content</label>
        <textarea rows="10" className="form-control" value={@state.content} onChange={@onChangeContent} disabled={@state.updating} />
      </div>
      <div className="form-group">
        <label class="control-label">Tags</label>
        <TagsInput ref='tags' valueLink={this.linkState('tags')} />
      </div>
      {
        if @props.card.isNew()
          <div className="checkbox">
            <label>
              <input type="checkbox" checked={@state.dontCloseDialog} onChange={@onChangeDontCloseDialog} /> Don't Close Dialog
            </label>
          </div>
      }
      <div className="form-group">
        <button className="btn btn-default pull-right" onClick={@onClickOk} disabled={@state.updating}>
          &nbsp;
          OK
          &nbsp;
          {
            if @state.updating
              <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' />
          }
        </button>
      </div>
    </div>
  </Modal>