-

'use strict';

var React = require('react'),
    Dispatcher = require('dispatchr')(),
    newforms = require('newforms'),
    LightboxFrame = require('../../js/components/LightboxFrame'),
    RenderForm = newforms.RenderForm,
    Router = require('react-router'),
    UnderlineInput = require('../../js/components/form/UnderlineInput'),
    CheckboxWidget = require('../../js/components/form/CheckboxWidget'),
    CSSTransitionGroup = React.addons.CSSTransitionGroup;

require('../../js/components/Lightbox.scss');
const cx = require('classnames');

module.exports = React.createClass({

    childContextTypes: {
        dispatcher: React.PropTypes.object.isRequired
    },

    getChildContext: function() {
        return {
            dispatcher: new Dispatcher()
        };
    },

    getInitialState: function() {
        const ExampleForm = newforms.Form.extend({
            text: newforms.IntegerField({
                widget: UnderlineInput
            })
        });
        const form = new ExampleForm({
            onChange: this.handleFormChange,
            validate: 'change'
        });
        return { form: form };
    },

    mixins: [Router.Navigation],

    handleFormChange: function() {
        this.forceUpdate();
    },
    
    handleSubmit: function(e) {
        e.preventDefault();
        // clear errors
        if (!this.state.form.validate()) {
            this.shake();
        }
    },

    shake: function() {
        this.setState({
            shake: true
        }, function() {
            setTimeout(() => {
                this.setState({ shake: false });
            }, 250);
        });
    },

    getForm: function() {
        const _baseForm = <form style={{position:'relative'}}
            className={cx('collection-method', {
                shake: this.state.shake
            })}
            ref="frm"
            onSubmit={this.handleSubmit}>
            <RenderForm form={this.state.form} />
            <button type="submit">submit</button>
        </form>;
        return _baseForm;
        //return this.shake() ? _baseForm : (
            //<CSSTransitionGroup transitionName='shake'>
                //{_baseForm}
            //</CSSTransitionGroup>
        //);
    },

    render: function() {
        return (
            <LightboxFrame>{this.getForm()}</LightboxFrame>
        );
    }
});