"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ComboBox_1 = require("office-ui-fabric-react/lib/ComboBox");
require("./ComboBox.Basic.Example.scss");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var SelectableOption_types_1 = require("office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types");
var Button_1 = require("../../../Button");
var INITIAL_OPTIONS = [
    { key: 'Header', text: 'Theme Fonts', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
    { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' },
    { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' },
    { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' },
    { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' },
    { key: 'divider_2', text: '-', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Divider },
    { key: 'Header1', text: 'Other Options', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
    { key: 'D', text: 'Option d' },
    { key: 'E', text: 'Option e' },
    { 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' }
];
var ComboBoxBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(ComboBoxBasicExample, _super);
    function ComboBoxBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._testOptions = [
            { key: 'Header', text: 'Theme Fonts', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
            { key: 'A', text: 'Arial Black' },
            { key: 'B', text: 'Times New Roman' },
            { key: 'C', text: 'Comic Sans MS' },
            { key: 'divider_2', text: '-', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Divider },
            { key: 'Header1', text: 'Other Options', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
            { key: 'D', text: 'Option d' },
            { key: 'E', text: 'Option e' },
            { 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', disabled: true }
        ];
        _this._fontMapping = (_a = {},
            _a['Arial Black'] = '"Arial Black", "Arial Black_MSFontService", sans-serif',
            _a['Time New Roman'] = '"Times New Roman", "Times New Roman_MSFontService", serif',
            _a['Comic Sans MS'] = '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy',
            _a['Calibri'] = 'Calibri, Calibri_MSFontService, sans-serif',
            _a);
        _this.scaleOptions = [];
        // Render content of item
        _this._onRenderFontOption = function (item) {
            if (item.itemType === SelectableOption_types_1.SelectableOptionMenuItemType.Header ||
                item.itemType === SelectableOption_types_1.SelectableOptionMenuItemType.Divider) {
                return React.createElement("span", { className: 'ms-ComboBox-optionText' }, item.text);
            }
            var fontFamily = _this._fontMapping[item.text];
            if (fontFamily === null || fontFamily === undefined) {
                var newFontFamily = item.text;
                if (newFontFamily.indexOf(' ') > -1) {
                    newFontFamily = '"' + newFontFamily + '"';
                }
                // add a default fallback font
                newFontFamily += ',"Segoe UI",Tahoma,Sans-Serif';
                _this._fontMapping = Utilities_1.assign({}, _this._fontMapping, (_a = {}, _a[fontFamily] = newFontFamily, _a));
                fontFamily = newFontFamily;
            }
            return (React.createElement("span", { className: 'ms-ComboBox-optionText', style: { fontFamily: fontFamily && fontFamily } }, item.text));
            var _a;
        };
        _this._getOptions = function (currentOptions) {
            if (_this.state.options.length > 0) {
                return _this.state.options;
            }
            _this.setState({
                options: INITIAL_OPTIONS,
                selectedOptionKey: 'C1',
                value: undefined
            });
            return INITIAL_OPTIONS;
        };
        _this._getOptionsMulti = function (currentOptions) {
            if (_this.state.optionsMulti.length > 0) {
                return _this.state.optionsMulti;
            }
            _this.setState({
                optionsMulti: INITIAL_OPTIONS,
                selectedOptionKeys: ['C1'],
                valueMulti: undefined
            });
            return INITIAL_OPTIONS;
        };
        _this._onChanged = function (option, index, value) {
            console.log('_onChanged() is called: option = ' + JSON.stringify(option));
            if (option !== undefined) {
                _this.setState({
                    selectedOptionKey: option.key,
                    value: undefined
                });
            }
            else if (index !== undefined && index >= 0 && index < _this.state.options.length) {
                _this.setState({
                    selectedOptionKey: _this.state.options[index].key,
                    value: undefined
                });
            }
            else if (value !== undefined) {
                var newOption = { key: value, text: value };
                _this.setState({
                    options: _this.state.options.concat([newOption]),
                    selectedOptionKey: newOption.key,
                    value: undefined
                });
            }
        };
        _this._onChangedMulti = function (option, index, value) {
            console.log('_onChangedMulti() is called: option = ' + JSON.stringify(option));
            if (option !== undefined) {
                // User selected/de-selected an existing option
                _this.setState({
                    selectedOptionKeys: _this._updateSelectedOptionKeys(_this.state.selectedOptionKeys || [], option),
                    valueMulti: undefined
                });
            }
            else if (value !== undefined) {
                // User typed a freeform option
                var newOption = { key: value, text: value };
                var updatedSelectedKeys = _this.state.selectedOptionKeys
                    ? _this.state.selectedOptionKeys.concat([newOption.key]) : [newOption.key];
                _this.setState({
                    optionsMulti: _this.state.optionsMulti.concat([newOption]),
                    selectedOptionKeys: updatedSelectedKeys,
                    valueMulti: undefined
                });
            }
        };
        _this._updateSelectedOptionKeys = function (selectedKeys, option) {
            if (selectedKeys && option) {
                var index = selectedKeys.indexOf(option.key);
                if (option.selected && index < 0) {
                    selectedKeys.push(option.key);
                }
                else {
                    selectedKeys.splice(index, 1);
                }
            }
            return selectedKeys;
        };
        _this._basicComboBoxOnClick = function () {
            _this._basicCombobox.focus(true);
        };
        _this._basicComboBoxComponentRef = function (component) {
            _this._basicCombobox = component;
        };
        _this.state = {
            options: [],
            optionsMulti: [],
            selectedOptionKey: undefined,
            value: 'Calibri',
            valueMulti: 'Calibri'
        };
        for (var i = 0; i < 1000; i++) {
            _this.scaleOptions.push({
                key: "" + i,
                text: "Option " + i
            });
        }
        _this.scaleOptions.push({ key: '1000', text: 'Very Very Very Very long option' });
        return _this;
        var _a;
    }
    ComboBoxBasicExample.prototype.render = function () {
        var _a = this.state, options = _a.options, selectedOptionKey = _a.selectedOptionKey, value = _a.value;
        var optionsMulti = this.state.optionsMulti;
        return (React.createElement("div", { className: "ms-ComboBoxBasicExample" },
            React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: "C", label: "Basic uncontrolled example (allowFreeform: T, AutoComplete: T):", id: "Basicdrop1", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: this._testOptions, onRenderOption: this._onRenderFontOption, componentRef: this._basicComboBoxComponentRef, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
                    return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
                } }),
            React.createElement(Button_1.PrimaryButton, { text: "Set focus", onClick: this._basicComboBoxOnClick }),
            React.createElement(ComboBox_1.ComboBox, { multiSelect: true, defaultSelectedKey: ['C', 'E'], label: "Basic uncontrolled multi select example (allowFreeform: T, AutoComplete: T):", id: "Basicdrop11", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: "C", label: "Basic uncontrolled example (allowFreeform: T, AutoComplete: F):", id: "Basicdrop2", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "off", options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            React.createElement(ComboBox_1.ComboBox, { selectedKey: "C", label: "Basic uncontrolled example (allowFreeform: F, AutoComplete: T):", id: "Basicdrop3", ariaLabel: "Basic ComboBox example", allowFreeform: false, autoComplete: "on", options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            React.createElement(ComboBox_1.VirtualizedComboBox, { defaultSelectedKey: "C", label: "Scaled example with 1000 items (allowFreeform: T, AutoComplete: T):", id: "Basicdrop1", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: this.scaleOptions, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
                    return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
                }, 
                // tslint:enable:jsx-no-lambda
                dropdownMaxWidth: 200, useComboBoxAsMenuWidth: true }),
            React.createElement(ComboBox_1.VirtualizedComboBox, { defaultSelectedKey: "C", label: "Scaled example with 1000 items (allowFreeform: T, AutoComplete: T):", id: "Basicdrop1", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: this.scaleOptions, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
                    return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
                }, 
                // tslint:enable:jsx-no-lambda
                dropdownMaxWidth: 400, useComboBoxAsMenuWidth: true }),
            React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: "C", label: "Basic uncontrolled example (allowFreeform: F, AutoComplete: F):", id: "Basicdrop4", ariaLabel: "Basic ComboBox example", allowFreeform: false, autoComplete: "off", options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            React.createElement(ComboBox_1.ComboBox, { label: "Basic uncontrolled example:", id: "Basicdrop5", ariaLabel: "Basic ComboBox example", errorMessage: "Error! Here is some text!", options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            React.createElement(ComboBox_1.ComboBox, { 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' }
                ], disabled: true, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
            value ? (React.createElement(ComboBox_1.ComboBox, { label: "Basic controlled example:", id: "Basicdrop5", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: options, onChanged: this._onChanged, onResolveOptions: this._getOptions, text: value && value, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } })) : (React.createElement(ComboBox_1.ComboBox, { selectedKey: selectedOptionKey && selectedOptionKey, label: "Basic controlled example:", id: "Basicdrop5", ariaLabel: "Basic ComboBox example", allowFreeform: true, autoComplete: "on", options: options, onChanged: this._onChanged, onResolveOptions: this._getOptions, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } })),
            React.createElement(ComboBox_1.ComboBox, { multiSelect: true, selectedKey: this.state.selectedOptionKeys, label: "Basic controlled ComboBox multi-select example:", id: "Basicdrop5", ariaLabel: "Basic controlled ComboBox multi-select example", allowFreeform: true, autoComplete: "on", options: optionsMulti, onChanged: this._onChangedMulti, onResolveOptions: this._getOptionsMulti, onRenderOption: this._onRenderFontOption, 
                // tslint:disable:jsx-no-lambda
                onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } })));
    };
    return ComboBoxBasicExample;
}(React.Component));
exports.ComboBoxBasicExample = ComboBoxBasicExample;
//# sourceMappingURL=ComboBox.Basic.Example.js.map