import React from 'react';
import ReactDOM from 'react-dom';
import KendoDropDownList from 'kendo-ui-react-jquery-dropdownlist';

//Don't forget CSS, webpack plugin used to include CSS
import 'kendo-ui-core/css/web/kendo.common.core.min.css';
import 'kendo-ui-core/css/web/kendo.default.min.css';

var App = React.createClass({
  render: function() {
      return (
                <KendoDropDownList
                    //only updates upon state change from above if widget supports setOptions()
                    //don't define events here, do it in events prop
                    options={{ //nothing new here, object of KUI configuration values
                        dataSource:[{
                            text: "Item1",
                            value: "1"
                        }, {
                            text: "Item2",
                            value: "2"
                        }, {
                            text: "Item3",
                            value: "3"
                        }],
                        dataTextField: "text",
                        dataValueField: "value"
                    }}
                    //updates if object is different from initial mount
                    methods={{ //name of method and array of arguments to pass to method
                        open:[], //send empty array if no arguments
                        value:['2']
                    }}
                    //Right now, always updates
                    events={{ //name of event, and callback
                        close:function(){console.log('dropdown closed')},
                        select:function(){console.log('item selected')},
                        open:function(){console.log('dropdown opened')}
                    }}
                    //updates if array is different from initial mount
                    unbindEvents={[ //name of event to unbind, string
                        "select"
                    ]}
                    //updates if array is different from initial mount
                    triggerEvents={[ //name of event to trigger, string
                        "open",
                    ]}>
                        <input className="kendoDropDownList" />
                </KendoDropDownList>
            );
    }
});

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