var ListItem = React.createClass({
    render: function() {
         return <li data-icon={this.props.item.icon}>
            <p>{this.props.item.text1}</p>
            <p>{this.props.item.text2}</p>
        </li>;
    }
});

var MenustripDemo = React.createClass({
    getInitialState: function() {
        return {
            items: [{
                id: 1,
                icon: "ion-usb",
                text1: "Connected as a media device",
                text2: "Touch for other USB options"
            }, {
                id: 2,
                icon: "foundation-mail",
                text1: "4 new messages",
                text2: "hello@mobiscroll.com"
            }, {
                id: 3,
                icon: "foundation-mail",
                text1: "1 new message",
                text2: "support@mobiscroll.com"
            }, {
                id: 4,
                icon: "alarm2",
                text1: "Time to wake up",
                text2: "8:00 AM"
            }, {
                id: 5,
                icon: "calendar",
                text1: "Google I/O Keynote",
                text2: "Moscone West"
            }, {
                id: 6,
                icon: "download",
                text1: "Download finished",
                text2: "mobiscroll.custom-2.17.0.zip"
            }]
        };
    },
    stages: function() {
        return {
            left: [{
                percent: 30,
                icon: 'remove',
                text: 'dismiss',
                action: function (event, inst) {
                    inst.remove(event.target);
                    return false;
                }
            }],
            right: [{
                percent: -30,
                icon: 'remove',
                text: 'dismiss',
                action: function (event, inst) {
                    inst.remove(event.target);
                    return false;
                }
            }]
        };
    },
    render: function() {
        return (
            <div className="md-options">
                <mobiscroll.Menustrip
                    theme="ios" 
                    themeVariant=" "
                    lang=" "
                    type="options"
                    onItemTap={function (event, inst) {
                        mobiscroll.toast({
                            message: event.target.textContent + (event.target.classList.contains('mbsc-ms-item-sel') ? ' ON' : ' OFF')
                        });
                    }}
                >
                    <li data-selected="true" data-icon="connection">Wi-Fi</li>
                    <li data-icon="ion-bluetooth">Bluetooth</li>
                    <li data-icon="location">Location</li>
                    <li data-icon="fa-rotate-left"><span>Screen<br/>rotation</span></li>
                    <li data-selected="true" data-icon="volume-medium">Sound</li>
                    <li data-icon="download">Data</li>
                    <li data-icon="foundation-minus-circle"><span>Blocking<br/>mode</span></li>
                    <li data-icon="airplane"><span>Airplane<br />mode</span></li>
                    <li data-selected="true" data-icon="fa-leaf"><span>Power<br/>saving</span></li>
                    <li data-icon="alarm2">Alarm</li>
                    <li data-icon="ion-android-system-windows"><span>Multi<br/>window</span></li>
                </mobiscroll.Menustrip>

                <mobiscroll.Form theme="ios"  themeVariant=" " lang=" " >
                    <label>
                        <input defaultValue="55" type="range" data-role="range" data-icon='{ "left": "brightness-contrast" }'/>
                    </label>

                    <label>
                        <input defaultValue="85" type="range" data-role="range" data-icon='{ "left": "volume-medium" }'/>
                    </label>
                </mobiscroll.Form>
                <div className="mbsc-form-group">
                    <div className="mbsc-form-group-title">Notifications</div>
                    <mobiscroll.Listview
                        enhance={true}
                        itemType={ListItem} 
                        data={this.state.items}
                        stages={this.stages()}
                        theme="ios" 
                        themeVariant=" "
                        lang=" "
                    />
                </div>
            </div>
        );
    }
});