// a simple table that displays info about the selected task
var TaskInfo = React.createClass({

    // render a table if a task is selected
    render : function() {
        var html = this.props.task ?
            <table>
                <tbody>
                    <tr><td>Name:</td><td>{this.props.task.get('Name')}</td></tr>
                    <tr><td>Start:</td><td>{Ext.Date.format(this.props.task.get('StartDate'), 'Y-m-d')}</td></tr>
                    <tr><td>End:</td><td>{Ext.Date.format(this.props.task.get('EndDate'), 'Y-m-d')}</td></tr>
                </tbody>
            </table> :
            <p>Select a task to display info here.</p>;

        return (
            <div className="box">
                {html}
                <button onClick={this.props.handleAddClick}>Add task</button>
            </div>
        );
    }
});

// the outermost component, holds the gantt chart and a taskinfo table and ties them togheter
var GanttDemoApp = React.createClass({

    // no task selected on startup
    getInitialState : function() {
        return { selectedTask : null };
    },

    // event handler for task selection, store selected task in state (which triggers a rerender)
    handleTaskSelect : function(taskRecord) {
        this.setState({ selectedTask : taskRecord });
    },

    // event handler for add button, call method on gantt chart to add a new task
    handleAddClick: function() {
        this.refs.gantt1.addTask();
    },

    // renders a gantt chart, taskinfo table and a button to add new tasks
    render : function() {
        return (
            <div>

                <h1>React demo</h1>

                <div className="info">
                    <p>This example demonstrates how Ext Gantt can be wrapped as an React component.</p>
                    <p>A blog post describing the example can be found here: <a href="https://www.bryntum.com/blog/using-ext-gantt-with-react">https://www.bryntum.com/blog/using-ext-gantt-with-react</a></p>
                    <p>Source available here: <a href="https://www.bryntum.com/playpen/react/react.zip">https://www.bryntum.com/playpen/react/react.zip</a></p>
                </div>

                <TaskInfo task={this.state.selectedTask} handleAddClick={this.handleAddClick}/>

                <Gantt
                    // props used to configure the gantt chart
                    id="gantt1"
                    ref="gantt1"
                    taskUrl="data/tasks.json"
                    dependenciesUrl="data/dependencies.json"
                    preset="weekAndDayLetter"

                    // triggered on task select
                    onTaskSelect={this.handleTaskSelect}>

                    {/* columns as children */}
                    <Column xtype="namecolumn" width={150}/>
                    <Column xtype="startdatecolumn" width={90}/>
                    <Column xtype="enddatecolumn" width={90}/>

                </Gantt>
            </div>
        );
    }
});

ReactDOM.render(
    <GanttDemoApp />,
    document.getElementById('gantt-demo')
);