// a wrapper for the gantt chart to simplify usage with react
window.Gantt = React.createClass({
    // supported properties
    propTypes : {
        id              : React.PropTypes.string.isRequired,
        width           : React.PropTypes.number,
        height          : React.PropTypes.number,
        rowHeight       : React.PropTypes.number,
        title           : React.PropTypes.string,
        taskUrl         : React.PropTypes.string.isRequired,
        dependenciesUrl : React.PropTypes.string.isRequired,
        preset          : React.PropTypes.string,
        split           : React.PropTypes.bool,

        onTaskSelect    : React.PropTypes.func
    },

    // default values
    getDefaultProps : function() {
        return {
            width     : 1000,
            height    : 400,
            split     : false,
            rowHeight : 30
        };
    },

    // called after reacts render, which yields a div
    // create an gantt chart and render it to that div
    componentDidMount : function() {
        var config = {
            // triton theme is borderless
            eventBorderWidth: 0,

            // store that holds all tasks
            taskStore : {
                type     : 'gantt_taskstore',
                autoLoad : true,
                proxy    : {
                    type : 'ajax',
                    url  : this.props.taskUrl
                }
            },

            // store that holds dependencies between tasks
            dependencyStore : {
                type     : 'gantt_dependencystore',
                autoLoad : true,
                proxy    : {
                    type : 'ajax',
                    url  : this.props.dependenciesUrl
                }
            },

            // gantt settings from props
            title      : this.props.title,
            width      : this.props.width,
            height     : this.props.height,
            split      : this.props.split,
            viewPreset : this.props.preset,
            rowHeight  : this.props.rowHeight,

            // renders to a div
            renderTo : this.props.id,

            // if the callback onTaskSelect is set
            listeners : {
                taskclick : (gantt, taskRecord) => {
                    this.props.onTaskSelect && this.props.onTaskSelect(taskRecord);
                }
            }
        };

        // transform children into columns
        if (this.props.children) {
            config.columns = React.Children.map(this.props.children, child => {
                return Ext.apply({}, child.props);
            });
        }

        // store the rendered gantt chart in state for later access
        this.setState({ widget : Ext.create('Gnt.panel.Gantt', config) });
    },

    // prevent react from rerendering the gantt chart
    shouldComponentUpdate : function() {
        return false;
    },

    // can be called from parent component to add a new task
    addTask : function() {
        this.state.widget.getTaskStore().getRoot().appendChild({
            Name: 'New task',
            leaf: true
        });
    },

    // just renders a div that we use to do the actual gantt chart rendering
    // columns as children, but since Column doesn't render any markup it will be empty in the dom
    render : function() {
        return (
            <div className="gantt" id={this.props.id}>
                {this.props.children}
            </div>
        );
    }
});

// a column in the gantt chart, just holds config data, no ui in react
// prop xtype determines type of column
window.Column = React.createClass({
    propTypes : {
        xtype : React.PropTypes.string.isRequired,
        flex  : React.PropTypes.string,
        width : React.PropTypes.number
    },

    render : function() {
        return null;
    }
});