const App = React.createClass({
    getInitialState() {
        return {
            options: [
                {name: 'Foo', value: 0},
                {name: 'Bar', value: 1},
                {name: 'Baz', value: 2, disabled: true},
                {name: 'Qux', value: 3},
                {name: 'Quux', value: 4},
                {name: 'Corge', value: 5},
                {name: 'Grault', value: 6},
                {name: 'Garply', value: 7},
                {name: 'Waldo', value: 8},
                {name: 'Fred', value: 9},
                {name: 'Plugh', value: 10},
                {name: 'Xyzzy', value: 11},
                {name: 'Thud', value: 12}
            ],
            value: [0, 3, 9]
        };
    },

    handleChange(value) {
        this.setState({value});
    },

    render() {
        const {options, value} = this.state;
        const selectedCount = value.length;
        const availableCount = options.length - selectedCount;

        return (
            <MultiselectTwoSides
                {...this.state}
                className="msts_theme_example"
                onChange={this.handleChange}
                availableHeader="Available"
                availableFooter={`Available: ${availableCount}`}
                selectedHeader="Selected"
                selectedFooter={`Selected: ${selectedCount}`}
                showControls
                searchable
                />
        );
    }
});

ReactDOM.render(<App/>, document.getElementById('app'));

MultiselectTwoSides.propTypes = {
    availableFooter: React.PropTypes.node,
    availableHeader: React.PropTypes.node,
    className: React.PropTypes.string,
    clearFilterText: React.PropTypes.string,
    clearable: React.PropTypes.bool,
    deselectAllText: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    filterComponent: React.PropTypes.func,
    highlight: React.PropTypes.array,
    labelKey: React.PropTypes.string,
    limit: React.PropTypes.number,
    onChange: React.PropTypes.func,
    options: React.PropTypes.array,
    placeholder: React.PropTypes.string,
    searchable: React.PropTypes.bool,
    selectAllText: React.PropTypes.string,
    selectedFooter: React.PropTypes.node,
    selectedHeader: React.PropTypes.node,
    showControls: React.PropTypes.bool,
    value: React.PropTypes.array,
    valueKey: React.PropTypes.string
};

MultiselectTwoSides.defaultProps = {
    clearFilterText: 'Clear',
    clearable: true,
    deselectAllText: 'Deselect all',
    disabled: false,
    highlight: [],
    labelKey: 'label',
    options: [],
    searchable: false,
    selectAllText: 'Select all',
    showControls: false,
    value: [],
    valueKey: 'value'
};