(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "@greenatom/icons", "react-select", "../utils/getValueObject", "../SelectBase", "../Avatar", "./components/MusliSelectDropdownIndicator", "./components/MultiSelectMultiValue", "./components/MultiSelectMenu", "./components/MultiSelectOption", "./components/MultiSelectContainer"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var icons_1 = require("@greenatom/icons");
    var react_select_1 = (0, tslib_1.__importDefault)(require("react-select"));
    var getValueObject_1 = (0, tslib_1.__importDefault)(require("../utils/getValueObject"));
    var SelectBase_1 = require("../SelectBase");
    var Avatar_1 = require("../Avatar");
    var MusliSelectDropdownIndicator_1 = (0, tslib_1.__importDefault)(require("./components/MusliSelectDropdownIndicator"));
    var MultiSelectMultiValue_1 = (0, tslib_1.__importDefault)(require("./components/MultiSelectMultiValue"));
    var MultiSelectMenu_1 = (0, tslib_1.__importDefault)(require("./components/MultiSelectMenu"));
    var MultiSelectOption_1 = (0, tslib_1.__importDefault)(require("./components/MultiSelectOption"));
    var MultiSelectContainer_1 = (0, tslib_1.__importDefault)(require("./components/MultiSelectContainer"));
    var SelectComponent = function (props) {
        var _a = props.placeholder, placeholder = _a === void 0 ? "" : _a, isDisabled = props.isDisabled, options = props.options, menuIsOpen = props.menuIsOpen, onChange = props.onChange, defaultValue = props.defaultValue, _b = props.isClearable, isClearable = _b === void 0 ? true : _b, name = props.name, value = props.value, onInputChange = props.onInputChange, className = props.className, errorMessage = props.errorMessage, _c = props.isError, isError = _c === void 0 ? false : _c, width = props.width, isRequired = props.isRequired, _d = props.size, size = _d === void 0 ? "l" : _d, onInnerMenuOpen = props.onInnerMenuOpen, status = props.status, statusText = props.statusText, _e = props.fieldNames, fieldNames = _e === void 0 ? { value: "value", label: "label" } : _e, _f = props.onChangeReturnType, onChangeReturnType = _f === void 0 ? "instance" : _f, onFocus = props.onFocus, onBlur = props.onBlur, iconLeft = props.iconLeft, isAutoFocus = props.isAutoFocus, onKeyDown = props.onKeyDown, id = props.id, _g = props.type, type = _g === void 0 ? "basic" : _g, isDrawer = props.isDrawer, viewType = props.viewType, isReadOnly = props.isReadOnly, otherProps = (0, tslib_1.__rest)(props, ["placeholder", "isDisabled", "options", "menuIsOpen", "onChange", "defaultValue", "isClearable", "name", "value", "onInputChange", "className", "errorMessage", "isError", "width", "isRequired", "size", "onInnerMenuOpen", "status", "statusText", "fieldNames", "onChangeReturnType", "onFocus", "onBlur", "iconLeft", "isAutoFocus", "onKeyDown", "id", "type", "isDrawer", "viewType", "isReadOnly"]);
        var _h = (0, tslib_1.__read)((0, react_1.useState)(menuIsOpen), 2), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
        var selectRef = (0, react_1.useRef)(null);
        var localValue = (0, react_1.useMemo)(function () {
            if (options &&
                typeof value !== "undefined" &&
                typeof (value === null || value === void 0 ? void 0 : value[0]) !== "object") {
                return options.filter(function (option) {
                    return value.includes((0, getValueObject_1.default)(option, fieldNames.value));
                });
            }
            return value;
        }, [options, fieldNames, value]);
        var iconLeftSelect = (0, react_1.useMemo)(function () {
            if (type === "avatar") {
                return (react_1.default.createElement(Avatar_1.Avatar, { size: "s", as: "div", icon: react_1.default.createElement(icons_1.IconBrokenUser, null), isDisabled: isDisabled }));
            }
            return iconLeft;
        }, [type, iconLeft, isDisabled]);
        var handleFocus = function (event) {
            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
            setIsMenuOpen(true);
        };
        // У react-select есть лимит на получение количества пропсов, чтобы его обойти использую left props
        var leftProps = (0, tslib_1.__assign)({ errorMessage: errorMessage, isError: isError, width: width, isRequired: isRequired, size: size, onInnerMenuOpen: onInnerMenuOpen, status: status, statusText: statusText, iconLeft: iconLeftSelect, onBlur: onBlur, onFocus: handleFocus, type: type, isDrawer: isDrawer, viewType: viewType, isReadOnly: isReadOnly }, otherProps);
        var handleChange = function (newValue, actionMeta) {
            var _a, _b, _c;
            if (actionMeta.action === "clear") {
                setIsMenuOpen(false);
                (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.blur();
            }
            if (onChangeReturnType === "instance") {
                (_b = onChange) === null || _b === void 0 ? void 0 : _b((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(newValue), false), actionMeta);
            }
            else if (newValue) {
                (_c = onChange) === null || _c === void 0 ? void 0 : _c(newValue.map(function (option) {
                    return (0, getValueObject_1.default)(option, fieldNames.value);
                }), actionMeta);
            }
        };
        return (react_1.default.createElement(react_select_1.default, (0, tslib_1.__assign)({ ref: selectRef, components: {
                SelectContainer: MultiSelectContainer_1.default,
                Menu: MultiSelectMenu_1.default,
                IndicatorsContainer: SelectBase_1.SelectIndicators,
                DropdownIndicator: MusliSelectDropdownIndicator_1.default,
                ClearIndicator: SelectBase_1.SelectClearIndicator,
                Control: SelectBase_1.SelectControl,
                Placeholder: SelectBase_1.SelectPlaceholder,
                MultiValue: MultiSelectMultiValue_1.default,
                ValueContainer: SelectBase_1.SelectValueContainer,
                Option: MultiSelectOption_1.default
            }, name: name, menuPlacement: "auto", value: localValue, defaultValue: defaultValue, getOptionValue: function (option) {
                return (0, getValueObject_1.default)(option, fieldNames.value);
            }, getOptionLabel: function (option) {
                return (0, getValueObject_1.default)(option, fieldNames.label);
            }, menuIsOpen: isMenuOpen, isMulti: true, isSearchable: false, options: options, isDisabled: isDisabled || isReadOnly, onChange: handleChange, onInputChange: onInputChange, isClearable: isClearable, className: className, classNamePrefix: "react-select", placeholder: placeholder, autoFocus: isAutoFocus, onKeyDown: onKeyDown, id: id, hideSelectedOptions: false, closeMenuOnSelect: false, onMenuInputFocus: function () { return setIsMenuOpen(true); }, onMenuOpen: function () { return setIsMenuOpen(true); }, onMenuClose: function () { return setIsMenuOpen(false); }, captureMenuScroll: false }, leftProps)));
    };
    exports.default = SelectComponent;
});
