import { __assign, __rest } from "tslib";
// @ts-nocheck
import '../SelectComponents/Select.css';
import React, { forwardRef, useRef } from 'react';
import { useForkRef } from '../../hooks/useForkRef/useForkRef';
import { useSelect } from '../../hooks/useSelect/useSelect';
import { IconClose } from '../../icons/IconClose/IconClose';
import { IconSelect } from '../../icons/IconSelect/IconSelect';
import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
import { cnSelect } from '../SelectComponents/cnSelect';
import { defaultlabelForCreate, defaultlabelForNotFound, getInputWidth, getSelectDropdownForm, } from '../SelectComponents/helpers';
import { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';
import { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';
import { SelectItem } from '../SelectComponents/SelectItem/SelectItem';
import { SelectValueTag } from '../SelectComponents/SelectValueTag/SelectValueTag';
import { defaultPropForm, defaultPropSize, defaultPropView } from '../SelectComponents/types';
import { isGroupValuesParams, isMultipleParams, isNotMultipleParams, withDefaultGetters, } from './helpers';
function ComboboxRender(props, ref) {
    var defaultDropdownRef = useRef(null);
    var defaultControlRef = useRef(null);
    var controlInnerRef = useRef(null);
    var helperInputFakeElement = useRef(null);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var _a = 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 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? 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 ? defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? 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 = __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 = 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 = getSelectDropdownForm(form);
    var renderItemDefault = function (props) {
        var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
        return (React.createElement(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.createElement(SelectValueTag, { label: getItemLabel(item), key: getItemKey(item), size: "m", handleRemove: disabled ? undefined : handleRemove }));
    };
    var renderValueDefaultNotMultiple = function (props) {
        var valueLable = getItemLabel(props.item);
        return (React.createElement("span", { className: cnSelect('ControlValue'), title: valueLable }, valueLable));
    };
    var renderValueGroupValues = function (items) {
        return (React.createElement("span", { className: 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 = useForkRef([inputRef, inputRefProp]);
    var renderControlValue = function () {
        var width = multiple ? getInputWidth(controlInnerRef, helperInputFakeElement) : undefined;
        return (React.createElement(React.Fragment, null,
            isGroupValuesParams(props) && (React.createElement(React.Fragment, null, Array.isArray(props.value) &&
                props.value.length > 0 &&
                renderValue(props.value, clearValue))),
            isMultipleParams(props) &&
                !isGroupValuesParams(props) &&
                Array.isArray(props.value) &&
                props.value.map(function (item) {
                    return renderValue({ item: item, handleRemove: getHandleRemoveValue(item) });
                }),
            isNotMultipleParams(props) && props.value && renderValue({ item: props.value }),
            (!value || (Array.isArray(value) && value.length === 0)) && !searchValue && placeholder && (React.createElement("span", { className: cnSelect('Placeholder'), title: "placeholder" }, placeholder)),
            React.createElement("input", __assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleInputChange, ref: inputRefForRender, className: cnSelect('Input', {
                    size: size,
                    hide: (!multiple && !!value) || hideSearchBar,
                    multiple: multiple
                }), value: searchValue, style: { width: width } }))));
    };
    return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, multiple: multiple, ref: ref }, restProps),
        React.createElement("div", { className: cnSelect('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
            React.createElement("div", { className: cnSelect('ControlInner'), onClick: handleInputClick, role: "button", ref: controlInnerRef, "aria-hidden": "true" },
                React.createElement("div", { className: cnSelect('ControlValueContainer') }, multiple ? (React.createElement("div", { className: cnSelect('ControlValue', { groupValues: groupValues }) }, renderControlValue())) : (renderControlValue()))),
            React.createElement("span", { className: cnSelect('Indicators') },
                value && clearButton && (React.createElement("button", { type: "button", onClick: clearValue, className: cnSelect('ClearIndicator', [cnMixFocus()]) },
                    React.createElement(IconClose, { size: "xs", className: cnSelect('ClearIndicatorIcon') }))),
                React.createElement("button", { type: "button", className: cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                    React.createElement(IconSelect, { size: "xs", className: cnSelect('DropdownIndicatorIcon') })))),
        React.createElement(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 })));
}
export var Combobox = forwardRef(ComboboxRender);
export * from './helpers';
