import * as tslib_1 from "tslib";
import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, DropdownMenuItemType } from 'office-ui-fabric-react/lib/Dropdown';
import { autobind, BaseComponent } from '../../../Utilities';
import './Dropdown.Basic.Example.scss';
var DropdownBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(DropdownBasicExample, _super);
    function DropdownBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            selectedItem: undefined,
            selectedItems: [],
        };
        return _this;
    }
    DropdownBasicExample.prototype.render = function () {
        var _a = this.state, selectedItem = _a.selectedItem, selectedItems = _a.selectedItems;
        return (React.createElement("div", { className: 'DropdownBasicExample' },
            React.createElement(Dropdown, { className: 'Dropdown-example', placeHolder: 'Select an Option', label: 'Basic uncontrolled example:', id: 'Basicdrop1', ariaLabel: 'Basic dropdown example', options: [
                    { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'E', text: 'Option e' },
                    { key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider },
                    { key: 'Header2', text: 'People', itemType: DropdownMenuItemType.Header },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                    { key: 'H', text: 'Option h' },
                    { key: 'I', text: 'Option i' },
                    { key: 'J', text: 'Option j' },
                ], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), componentRef: this._resolveRef('_basicDropdown') }),
            React.createElement(PrimaryButton, { text: 'Set focus', onClick: this._onSetFocusButtonClicked }),
            React.createElement(Dropdown, { className: 'Dropdown-example', label: 'Disabled uncontrolled example with defaultSelectedKey:', defaultSelectedKey: 'D', options: [
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'E', text: 'Option e' },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                ], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), disabled: true }),
            React.createElement(Dropdown, { className: 'Dropdown-example', label: 'Controlled example:', selectedKey: (selectedItem ? selectedItem.key : undefined), onChanged: this.changeState, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), placeHolder: 'Select an Option', options: [
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
                    { key: 'E', text: 'Option e' },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                ] }),
            React.createElement(Dropdown, { placeHolder: 'Select options', label: 'Multi-Select uncontrolled example:', defaultSelectedKeys: ['Apple', 'Banana'], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), multiSelect: true, options: [
                    { key: 'Header2', text: 'Fruits', itemType: DropdownMenuItemType.Header },
                    { key: 'Apple', text: 'apple' },
                    { key: 'Banana', text: 'banana' },
                    { key: 'Orange', text: 'orange' },
                    { key: 'Grape', text: 'grape' },
                    { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
                    { key: 'Header3', text: 'Lanuages', itemType: DropdownMenuItemType.Header },
                    { key: 'English', text: 'english' },
                    { key: 'French', text: 'french' },
                    { key: 'Germany', text: 'germany' },
                ] }),
            React.createElement(Dropdown, { placeHolder: 'Select options', label: 'Multi-Select controlled example:', selectedKeys: selectedItems, onChanged: this.onChangeMultiSelect, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), multiSelect: true, options: [
                    { key: 'Header4', text: 'Colors', itemType: DropdownMenuItemType.Header },
                    { key: 'red', text: 'Red' },
                    { key: 'green', text: 'Green' },
                    { key: 'blue', text: 'Blue' },
                    { key: 'yellow', text: 'Yellow' },
                    { key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider },
                    { key: 'Header5', text: 'Flower', itemType: DropdownMenuItemType.Header },
                    { key: 'rose', text: 'Rose' },
                    { key: 'lily', text: 'Lily' },
                    { key: 'sunflower', text: 'Sunflower' },
                ] }),
            React.createElement(Dropdown, { label: 'Disabled uncontrolled example with defaultSelectedKey:', defaultSelectedKeys: ['GG', 'FF'], multiSelect: true, options: [
                    { key: 'AA', text: 'Option a' },
                    { key: 'BB', text: 'Option b' },
                    { key: 'CC', text: 'Option c' },
                    { key: 'DD', text: 'Option d' },
                    { key: 'EE', text: 'Option e' },
                    { key: 'FF', text: 'Option f' },
                    { key: 'GG', text: 'Option g' },
                ], disabled: true, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called') })));
    };
    DropdownBasicExample.prototype.changeState = function (item) {
        console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected);
        this.setState({ selectedItem: item });
    };
    DropdownBasicExample.prototype.onChangeMultiSelect = function (item) {
        var updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : [];
        if (item.selected) {
            // add the option if it's checked
            updatedSelectedItem.push(item.key);
        }
        else {
            // remove the option if it's unchecked
            var currIndex = updatedSelectedItem.indexOf(item.key);
            if (currIndex > -1) {
                updatedSelectedItem.splice(currIndex, 1);
            }
        }
        this.setState({
            selectedItems: updatedSelectedItem
        });
    };
    DropdownBasicExample.prototype.copyArray = function (array) {
        var newArray = [];
        for (var i = 0; i < array.length; i++) {
            newArray[i] = array[i];
        }
        return newArray;
    };
    DropdownBasicExample.prototype._onSetFocusButtonClicked = function () {
        if (this._basicDropdown) {
            this._basicDropdown.focus(true);
        }
    };
    DropdownBasicExample.prototype._log = function (str) {
        return function () {
            console.log(str);
        };
    };
    tslib_1.__decorate([
        autobind
    ], DropdownBasicExample.prototype, "changeState", null);
    tslib_1.__decorate([
        autobind
    ], DropdownBasicExample.prototype, "onChangeMultiSelect", null);
    tslib_1.__decorate([
        autobind
    ], DropdownBasicExample.prototype, "_onSetFocusButtonClicked", null);
    return DropdownBasicExample;
}(BaseComponent));
export { DropdownBasicExample };
//# sourceMappingURL=Dropdown.Basic.Example.js.map