"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var match_sorter_1 = tslib_1.__importDefault(require("match-sorter"));
var keycode_1 = tslib_1.__importDefault(require("keycode"));
var downshift_1 = tslib_1.__importStar(require("downshift"));
var helper_1 = require("../../utils/helper");
var IconPickerIcons_1 = require("./IconPickerIcons");
var Item_1 = require("./Item");
var IconPickerControl = /** @class */ (function (_super) {
    tslib_1.__extends(IconPickerControl, _super);
    function IconPickerControl() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            isOpen: false,
            inputValue: '',
            isFocused: false,
            vendorIndex: 0
        };
        return _this;
    }
    IconPickerControl.prototype.componentWillReceiveProps = function (nextProps) {
        var props = this.props;
        if (props.value !== nextProps.value) {
            this.setState({
                inputValue: ''
            });
        }
    };
    IconPickerControl.prototype.changeVendor = function (index) {
        this.setState({
            vendorIndex: index
        }, this.formatOptions);
    };
    IconPickerControl.prototype.formatOptions = function () {
        var vendorIndex = this.state.vendorIndex || 0;
        var _a = IconPickerIcons_1.ICONS[vendorIndex], prefix = _a.prefix, icons = _a.icons;
        return icons.map(function (icon) { return ({
            label: prefix + icon,
            value: prefix + icon
        }); });
    };
    IconPickerControl.prototype.getVendors = function () {
        return IconPickerIcons_1.ICONS.map(function (icons) { return icons.name; });
    };
    IconPickerControl.prototype.inputRef = function (ref) {
        this.input = ref;
    };
    IconPickerControl.prototype.focus = function () {
        if (!this.input) {
            return;
        }
        this.input.focus();
        var len = this.input.value.length;
        len && this.input.setSelectionRange(len, len);
    };
    IconPickerControl.prototype.handleClick = function () {
        this.focus();
        this.setState({
            isOpen: true
        });
    };
    IconPickerControl.prototype.handleFocus = function (e) {
        this.setState({
            isOpen: true,
            isFocused: true
        });
        this.props.onFocus && this.props.onFocus(e);
    };
    IconPickerControl.prototype.handleBlur = function (e) {
        var _a = this.props, onBlur = _a.onBlur, trimContents = _a.trimContents, value = _a.value, onChange = _a.onChange;
        this.setState({
            isFocused: false
        }, function () {
            if (trimContents && value && typeof value === 'string') {
                onChange(value.trim());
            }
        });
        onBlur && onBlur(e);
    };
    IconPickerControl.prototype.handleInputChange = function (evt) {
        var value = evt.currentTarget.value;
        this.setState({
            inputValue: value
        });
    };
    IconPickerControl.prototype.handleKeyDown = function (evt) {
        var code = keycode_1.default(evt.keyCode);
        if (code !== 'backspace') {
            return;
        }
        var onChange = this.props.onChange;
        if (!this.state.inputValue) {
            onChange('');
            this.setState({
                inputValue: ''
            });
        }
    };
    IconPickerControl.prototype.handleChange = function (value) {
        var onChange = this.props.onChange;
        onChange(value);
        this.setState({
            isFocused: false,
            inputValue: ''
        });
    };
    IconPickerControl.prototype.handleStateChange = function (changes) {
        switch (changes.type) {
            case downshift_1.default.stateChangeTypes.itemMouseEnter:
            case downshift_1.default.stateChangeTypes.changeInput:
                this.setState({
                    isOpen: true
                });
                break;
            default:
                var state = {};
                if (typeof changes.isOpen !== 'undefined') {
                    state.isOpen = changes.isOpen;
                }
                if (this.state.isOpen && changes.isOpen === false) {
                    state.inputValue = '';
                }
                this.setState(state);
                break;
        }
    };
    IconPickerControl.prototype.renderFontIcons = function () {
        var _this = this;
        var _a = this.props, className = _a.className, inputOnly = _a.inputOnly, placeholder = _a.placeholder, cx = _a.classnames, name = _a.name, value = _a.value, noDataTip = _a.noDataTip;
        var options = this.formatOptions();
        var vendors = this.getVendors();
        return (react_1.default.createElement(downshift_1.default, { isOpen: this.state.isOpen, inputValue: this.state.inputValue, onChange: this.handleChange, onOuterClick: this.handleBlur, onStateChange: this.handleStateChange, selectedItem: [value] }, function (_a) {
            var getInputProps = _a.getInputProps, getItemProps = _a.getItemProps, isOpen = _a.isOpen, inputValue = _a.inputValue;
            var filteredOptions = inputValue && isOpen
                ? match_sorter_1.default(options, inputValue, { keys: ['label', 'value'] })
                : options;
            return (react_1.default.createElement("div", { className: cx("IconPickerControl-input IconPickerControl-input--withAC", inputOnly ? className : '', {
                    'is-opened': isOpen
                }), onClick: _this.handleClick },
                react_1.default.createElement("div", { className: cx('IconPickerControl-valueWrap') },
                    placeholder && !value && !_this.state.inputValue ? (react_1.default.createElement("div", { className: cx('IconPickerControl-placeholder') }, placeholder)) : null,
                    !value || (inputValue && isOpen) ? null : (react_1.default.createElement("div", { className: cx('IconPickerControl-value') },
                        react_1.default.createElement("i", { className: cx(value) }),
                        value)),
                    react_1.default.createElement("input", tslib_1.__assign({}, getInputProps({
                        name: name,
                        ref: _this.inputRef,
                        onFocus: _this.handleFocus,
                        onChange: _this.handleInputChange,
                        onKeyDown: _this.handleKeyDown,
                        value: _this.state.inputValue
                    }), { autoComplete: "off", size: 10 }))),
                isOpen ? (react_1.default.createElement("div", { className: cx('IconPickerControl-sugsPanel') },
                    vendors.length > 1 ? (react_1.default.createElement("div", { className: cx('IconPickerControl-tabs') }, vendors.map(function (vendor, index) { return (react_1.default.createElement("div", { className: cx('IconPickerControl-tab', {
                            active: _this.state.vendorIndex === index
                        }), onClick: function () { return _this.changeVendor(index); }, key: index }, vendor)); }))) : null,
                    filteredOptions.length ? (react_1.default.createElement("div", { className: cx('IconPickerControl-sugs', vendors.length > 1
                            ? 'IconPickerControl-multiVendor'
                            : 'IconPickerControl-singleVendor') }, filteredOptions.map(function (option, index) { return (react_1.default.createElement("div", tslib_1.__assign({}, getItemProps({
                        item: option.value,
                        className: cx("IconPickerControl-sugItem", {
                            'is-active': value === option.value
                        })
                    }), { key: index }),
                        react_1.default.createElement("i", { className: cx("" + option.value), title: "" + option.value }))); }))) : (react_1.default.createElement("div", { className: cx(vendors.length > 1
                            ? 'IconPickerControl-multiVendor'
                            : 'IconPickerControl-singleVendor') }, noDataTip)))) : null));
        }));
    };
    IconPickerControl.prototype.render = function () {
        var _a = this.props, className = _a.className, ns = _a.classPrefix, inputOnly = _a.inputOnly;
        var input = this.renderFontIcons();
        if (inputOnly) {
            return input;
        }
        return (react_1.default.createElement("div", { className: classnames_1.default(className, ns + "IconPickerControl", {
                'is-focused': this.state.isFocused
            }) }, input));
    };
    var _a, _b, _c;
    IconPickerControl.defaultProps = {
        resetValue: '',
        placeholder: '',
        noDataTip: '未找到匹配的图标'
    };
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Number]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "changeVendor", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "formatOptions", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "getVendors", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "inputRef", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "focus", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleClick", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleFocus", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleBlur", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.ChangeEvent) === "function" ? _a : Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleInputChange", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.KeyboardEvent) === "function" ? _b : Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleKeyDown", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleChange", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [typeof (_c = typeof downshift_1.StateChangeOptions !== "undefined" && downshift_1.StateChangeOptions) === "function" ? _c : Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IconPickerControl.prototype, "handleStateChange", null);
    return IconPickerControl;
}(react_1.default.PureComponent));
exports.default = IconPickerControl;
var IconPickerControlRenderer = /** @class */ (function (_super) {
    tslib_1.__extends(IconPickerControlRenderer, _super);
    function IconPickerControlRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    IconPickerControlRenderer = tslib_1.__decorate([
        Item_1.FormItem({
            type: 'icon-picker'
        })
    ], IconPickerControlRenderer);
    return IconPickerControlRenderer;
}(IconPickerControl));
exports.IconPickerControlRenderer = IconPickerControlRenderer;
//# sourceMappingURL=./renderers/Form/IconPicker.js.map
