import { __assign, __read, __rest, __spreadArray } from "tslib";
import React, { useMemo, useState, useRef } from "react";
import { IconBrokenUser } from "@greenatom/icons";
import Select from "react-select";
import getValueObject from "../utils/getValueObject";
import { SelectClearIndicator, SelectIndicators, SelectControl, SelectPlaceholder, SelectValueContainer } from "../SelectBase";
import { Avatar } from "../Avatar";
import MultiSelectDropdownIndicator from "./components/MusliSelectDropdownIndicator";
import MultiSelectMultiValue from "./components/MultiSelectMultiValue";
import MultiSelectMenu from "./components/MultiSelectMenu";
import MultiSelectOption from "./components/MultiSelectOption";
import MultiSelectContainer from "./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 = __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 = __read(useState(menuIsOpen), 2), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
    var selectRef = useRef(null);
    var localValue = 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(getValueObject(option, fieldNames.value));
            });
        }
        return value;
    }, [options, fieldNames, value]);
    var iconLeftSelect = useMemo(function () {
        if (type === "avatar") {
            return (React.createElement(Avatar, { size: "s", as: "div", icon: React.createElement(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 = __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(__spreadArray([], __read(newValue), false), actionMeta);
        }
        else if (newValue) {
            (_c = onChange) === null || _c === void 0 ? void 0 : _c(newValue.map(function (option) {
                return getValueObject(option, fieldNames.value);
            }), actionMeta);
        }
    };
    return (React.createElement(Select, __assign({ ref: selectRef, components: {
            SelectContainer: MultiSelectContainer,
            Menu: MultiSelectMenu,
            IndicatorsContainer: SelectIndicators,
            DropdownIndicator: MultiSelectDropdownIndicator,
            ClearIndicator: SelectClearIndicator,
            Control: SelectControl,
            Placeholder: SelectPlaceholder,
            MultiValue: MultiSelectMultiValue,
            ValueContainer: SelectValueContainer,
            Option: MultiSelectOption
        }, name: name, menuPlacement: "auto", value: localValue, defaultValue: defaultValue, getOptionValue: function (option) {
            return getValueObject(option, fieldNames.value);
        }, getOptionLabel: function (option) {
            return getValueObject(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)));
};
export default SelectComponent;
