// Code not available for React

// Code not available for React

// Code not available for React

// Code not available for React

var ListItem = React.createClass({
    render: function() {
        return <li data-id={this.props.item.id}> {this.props.item.title}
            <div className="md-wo-status">{this.props.item.status}</div>
         </li>;
    }
});

var ListviewDemo = React.createClass({
    getInitialState: function() {
        return {
            items: [{
                id: 1,
                title: "Work order #0001",
                status: "Assigned"
            }, {
                id: 2,
                title: "Work order #0002",
                status: "Assigned"
            }, {
                id: 3,
                title: "Work order #0003",
                status: "Assigned"
            }, {
                id: 4,
                title: "Work order #0004",
                status: "Assigned"
            }, {
                id: 5,
                title: "Work order #0005",
                status: "Assigned"
            }, {
                id: 6,
                title: "Work order #0006",
                status: "Assigned"
            }]
        };
    },
    stages: function() {
        var ids = 6;
        return {
            left: [{
                percent: 25,
                color: 'crimson',
                icon: 'checkmark',
                text: 'Complete',
                action: function (event, inst) {
                    event.target.firstElementChild.innerText = "Completed";
                }
            }, {
                percent: 50,
                color: 'green',
                icon: 'plus',
                text: 'Spawn',
                undo: true,
                action: function (event, inst) {
                    inst.add(++ids, 'Work order #000' + ids + ' created from WO #000' + event.target.getAttribute('data-id') + '<div class="md-wo-status">Assigned</div>', event.index + 1);
                }
            }],
            right: [{
                percent: -50,
                color: 'red',
                icon: 'remove',
                text: 'Delete',
                confirm: true,
                action: function (event, inst) {
                    inst.remove(event.target);
                    return false;
                }
            }, {
                percent: -25,
                color: 'olive',
                icon: 'clock',
                text: 'Pending',
                action: function (event, inst) {
                    event.target.firstElementChild.innerText = "Pending";
                }
            }]
        };
    },
    refresh: function (){
        window.location.reload();
    },
    onItemAdd: function () {
        // Your custom event handler goes here
    },
    onItemRemove: function () {
        // Your custom event handler goes here
    },
    onInit: function (event, inst) {
        // Your custom event handler goes here
    },
    onItemTap: function (event, inst) {
        // Your custom event handler goes here
    },
    onNavEnd: function (event, inst) {
        // Your custom event handler goes here
    },
    onNavStart: function (event, inst) {
        // Your custom event handler goes here
    },
    onSlideEnd: function (event, inst) {
        // Your custom event handler goes here
    },
    onSlideStart: function (event, inst) {
        // Your custom event handler goes here
    },
    onSort: function (event, inst) {
        // Your custom event handler goes here
    },
    onSortChange: function (event, inst) {
        // Your custom event handler goes here
    },
    onSortEnd: function (event, inst) {
        // Your custom event handler goes here
    },
    onSortStart: function (event, inst) {
        // Your custom event handler goes here
    },
    onSortUpdate: function (event, inst) {
        // Your custom event handler goes here
    },
    onStageChange: function (event, inst) {
        // Your custom event handler goes here
    },
    render: function() {
        return (
            <div>
                <div id="demo_note" onClick={this.refresh} className="md-demo-note demo-note" style={{display:'none'}}>
                    Whooa, list is empty. Tap here to refresh! &nbsp;
                    <span className="mbsc-ic mbsc-ic-loop2"></span>
                </div>
                <mobiscroll.Listview
                    ref="list"
                    itemType={ListItem} 
                    data={this.state.items}
                    stages={this.stages()}
                    theme=" " 
                    themeVariant=" "
                    lang=" "
                    sortable={true}
                    iconSlide={true}
                    striped={true}
                    onItemAdd={this.onItemAdd}
                    onItemRemove={this.onItemRemove}
                    onInit={this.onInit}
                    onItemTap={this.onItemTap}
                    onNavEnd={this.onNavEnd}
                    onNavStart={this.onNavStart}
                    onSlideEnd={this.onSlideEnd}
                    onSlideStart={this.onSlideStart}
                    onSort={this.onSort}
                    onSortChange={this.onSortChange}
                    onSortEnd={this.onSortEnd}
                    onSortStart={this.onSortStart}
                    onSortUpdate={this.onSortUpdate}
                    onStageChange={this.onStageChange}
                />
        </div>
        );
    }
});