"use strict";
exports.__esModule = true;
exports.Combobox = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("../SelectComponents/Select.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
var useSelect_1 = require("../../hooks/useSelect/useSelect");
var IconClose_1 = require("../../icons/IconClose/IconClose");
var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
var cnSelect_1 = require("../SelectComponents/cnSelect");
var helpers_1 = require("../SelectComponents/helpers");
var SelectContainer_1 = require("../SelectComponents/SelectContainer/SelectContainer");
var SelectDropdown_1 = require("../SelectComponents/SelectDropdown/SelectDropdown");
var SelectItem_1 = require("../SelectComponents/SelectItem/SelectItem");
var SelectValueTag_1 = require("../SelectComponents/SelectValueTag/SelectValueTag");
var types_1 = require("../SelectComponents/types");
var helpers_2 = require("./helpers");
function ComboboxRender(props, ref) {
    var defaultDropdownRef = (0, react_1.useRef)(null);
    var defaultControlRef = (0, react_1.useRef)(null);
    var controlInnerRef = (0, react_1.useRef)(null);
    var helperInputFakeElement = (0, react_1.useRef)(null);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var _a = (0, helpers_2.withDefaultGetters)(props), placeholder = _a.placeholder, placeholderSelected = _a.placeholderSelected, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, moreItems = _a.moreItems, onChange = _a.onChange, value = _a.value, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, dropdownView = _a.dropdownView, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, onCreate = _a.onCreate, inputRefProp = _a.inputRef, _g = _a.labelForNotFound, labelForNotFound = _g === void 0 ? helpers_1.defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? helpers_1.defaultlabelForCreate : _h, searchFunction = _a.searchFunction, _j = _a.multiple, multiple = _j === void 0 ? false : _j, _k = _a.groupValues, groupValues = _k === void 0 ? false : _k, clearButton = _a.clearButton, _l = _a.hideSearchBar, hideSearchBar = _l === void 0 ? true : _l, _m = _a.controlRef, controlRef = _m === void 0 ? defaultControlRef : _m, targetDropdownRef = _a.targetDropdownRef, buttonMoreLabel = _a.buttonMoreLabel, buttonMoreIcon = _a.buttonMoreIcon, searchValueCurrent = _a.searchValueCurrent, restProps = (0, tslib_1.__rest)(_a, ["placeholder", "placeholderSelected", "onBlur", "onFocus", "items", "moreItems", "onChange", "value", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "dropdownView", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "searchFunction", "multiple", "groupValues", "clearButton", "hideSearchBar", "controlRef", "targetDropdownRef", "buttonMoreLabel", "buttonMoreIcon", "searchValueCurrent"]);
    var _o = (0, useSelect_1.useSelect)({
        items: items,
        groups: groups,
        value: value,
        onChange: onChange,
        dropdownRef: dropdownRef,
        controlRef: controlRef,
        disabled: disabled,
        getItemLabel: getItemLabel,
        getItemKey: getItemKey,
        getGroupKey: getGroupKey,
        getItemGroupKey: getItemGroupKey,
        getItemDisabled: getItemDisabled,
        multiple: multiple,
        onBlur: onBlur,
        onFocus: onFocus,
        onCreate: onCreate,
        searchFunction: searchFunction
    }), getKeyProps = _o.getKeyProps, getOptionProps = _o.getOptionProps, isOpen = _o.isOpen, visibleItems = _o.visibleItems, isFocused = _o.isFocused, handleInputFocus = _o.handleInputFocus, handleInputBlur = _o.handleInputBlur, handleToggleDropdown = _o.handleToggleDropdown, inputRef = _o.inputRef, handleInputClick = _o.handleInputClick, handleInputChange = _o.handleInputChange, searchValue = _o.searchValue, clearValue = _o.clearValue, getHandleRemoveValue = _o.getHandleRemoveValue;
    // useEffect(() => {
    //   searchValueCurrent(searchValue);
    // // eslint-disable-next-line react-hooks/exhaustive-deps
    // }, [searchValue]);
    var dropdownForm = (0, helpers_1.getSelectDropdownForm)(form);
    var renderItemDefault = function (props) {
        var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
        return (react_1["default"].createElement(SelectItem_1.SelectItem, { label: getItemLabel(item), active: active, hovered: hovered, multiple: multiple, size: size, indent: dropdownForm === 'round' ? 'increased' : 'normal', onClick: onClick, onMouseEnter: onMouseEnter, disabled: getItemDisabled(item) }));
    };
    var renderValueDefaultMultiple = function (_a) {
        var item = _a.item, handleRemove = _a.handleRemove;
        return (react_1["default"].createElement(SelectValueTag_1.SelectValueTag, { label: getItemLabel(item), key: getItemKey(item), size: "m", handleRemove: disabled ? undefined : handleRemove }));
    };
    var renderValueDefaultNotMultiple = function (props) {
        var valueLable = getItemLabel(props.item);
        return (react_1["default"].createElement("span", { className: (0, cnSelect_1.cnSelect)('ControlValue'), title: valueLable }, valueLable));
    };
    var renderValueGroupValues = function (items) {
        return (react_1["default"].createElement("span", { className: (0, cnSelect_1.cnSelect)('Placeholder', { selected: true }), title: "placeholder" }, placeholderSelected !== null && placeholderSelected !== void 0 ? placeholderSelected : placeholder,
            " (",
            items.length,
            ")")
        // <SelectValueTag
        //   label={`${items.length} выбрано`}
        //   handleRemove={disabled ? undefined : handleRemove}
        // />
        );
    };
    var renderValue = renderValueProp ||
        (groupValues && multiple ? renderValueGroupValues : null) ||
        (multiple ? renderValueDefaultMultiple : renderValueDefaultNotMultiple);
    var inputRefForRender = (0, useForkRef_1.useForkRef)([inputRef, inputRefProp]);
    var renderControlValue = function () {
        var width = multiple ? (0, helpers_1.getInputWidth)(controlInnerRef, helperInputFakeElement) : undefined;
        return (react_1["default"].createElement(react_1["default"].Fragment, null,
            (0, helpers_2.isGroupValuesParams)(props) && (react_1["default"].createElement(react_1["default"].Fragment, null, Array.isArray(props.value) &&
                props.value.length > 0 &&
                renderValue(props.value, clearValue))),
            (0, helpers_2.isMultipleParams)(props) &&
                !(0, helpers_2.isGroupValuesParams)(props) &&
                Array.isArray(props.value) &&
                props.value.map(function (item) {
                    return renderValue({ item: item, handleRemove: getHandleRemoveValue(item) });
                }),
            (0, helpers_2.isNotMultipleParams)(props) && props.value && renderValue({ item: props.value }),
            (!value || (Array.isArray(value) && value.length === 0)) && !searchValue && placeholder && (react_1["default"].createElement("span", { className: (0, cnSelect_1.cnSelect)('Placeholder'), title: "placeholder" }, placeholder)),
            react_1["default"].createElement("input", (0, tslib_1.__assign)({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleInputChange, ref: inputRefForRender, className: (0, cnSelect_1.cnSelect)('Input', {
                    size: size,
                    hide: (!multiple && !!value) || hideSearchBar,
                    multiple: multiple
                }), value: searchValue, style: { width: width } }))));
    };
    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, (0, tslib_1.__assign)({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, multiple: multiple, ref: ref }, restProps),
        react_1["default"].createElement("div", { className: (0, cnSelect_1.cnSelect)('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
            react_1["default"].createElement("div", { className: (0, cnSelect_1.cnSelect)('ControlInner'), onClick: handleInputClick, role: "button", ref: controlInnerRef, "aria-hidden": "true" },
                react_1["default"].createElement("div", { className: (0, cnSelect_1.cnSelect)('ControlValueContainer') }, multiple ? (react_1["default"].createElement("div", { className: (0, cnSelect_1.cnSelect)('ControlValue', { groupValues: groupValues }) }, renderControlValue())) : (renderControlValue()))),
            react_1["default"].createElement("span", { className: (0, cnSelect_1.cnSelect)('Indicators') },
                value && clearButton && (react_1["default"].createElement("button", { type: "button", onClick: clearValue, className: (0, cnSelect_1.cnSelect)('ClearIndicator', [(0, MixFocus_1.cnMixFocus)()]) },
                    react_1["default"].createElement(IconClose_1.IconClose, { size: "xs", className: (0, cnSelect_1.cnSelect)('ClearIndicatorIcon') }))),
                react_1["default"].createElement("button", { type: "button", className: (0, cnSelect_1.cnSelect)('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                    react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: (0, cnSelect_1.cnSelect)('DropdownIndicatorIcon') })))),
        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, targetDropdownRef: targetDropdownRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, view: dropdownView, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate, buttonMoreLabel: buttonMoreLabel, buttonMoreIcon: buttonMoreIcon, moreItems: moreItems })));
}
exports.Combobox = (0, react_1.forwardRef)(ComboboxRender);
(0, tslib_1.__exportStar)(require("./helpers"), exports);
