// @ts-nocheck
import { __assign, __read } from "tslib";
import './SelectDropdown.css';
import React, { Fragment, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { isOptionForCreate, } from '../../../hooks/useSelect/useSelect';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
import { IconClose } from '../../../icons/IconClose/IconClose';
import { cn } from '../../../utils/bem';
import { cnForCssTransition } from '../../../utils/cnForCssTransition';
import { fabricIndex } from '../../../utils/fabricIndex';
import { Button } from '../../Button/Button';
import { Modal } from '../../Modal/Modal';
import { Popover } from '../../Popover/Popover';
import { Typography } from '../../Typography/Typography';
import { SelectCreateButton } from '../SelectCreateButton/SelectCreateButton';
import { SelectGroupLabel } from '../SelectGroupLabel/SelectGroupLabel';
export var selectDropdownform = ['default', 'brick', 'round'];
export var defaultSelectDropdownPropForm = selectDropdownform[0];
var cnSelectDropdown = cn('SelectDropdown');
var cnSelectModal = cn('SelectModal');
var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
// eslint-disable-next-line @typescript-eslint/no-redeclare
export var SelectDropdown = function (props) {
    var _a = __read(useState(false), 2), isModalOpen = _a[0], setIsModalOpen = _a[1];
    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, view = props.view, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, _b = props.buttonMoreIcon, buttonMoreIcon = _b === void 0 ? IconArrowRight : _b, buttonMoreLabel = props.buttonMoreLabel, moreItems = props.moreItems, targetDropdownRef = props.targetDropdownRef;
    var getIndex = fabricIndex(-1);
    var indent = form === 'round' ? 'increased' : 'normal';
    return (React.createElement(React.Fragment, null,
        React.createElement(Modal, { isOpen: isModalOpen, hasOverlay: true, width: "full", onOverlayClick: function () { return setIsModalOpen(false); }, onEsc: function () { return setIsModalOpen(false); } },
            React.createElement("div", { className: cnSelectModal() },
                React.createElement(Button, { view: "ghost", iconRight: IconClose, className: "Modal-CloseInner", onClick: function () { return setIsModalOpen(false); } }),
                React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase" }, "All tags"),
                React.createElement("div", { className: cnSelectModal('Items') }, moreItems &&
                    moreItems.map(function (item, i) {
                        return (React.createElement(Fragment, { key: "modal-item-".concat(i) }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                    })))),
        React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
            React.createElement(Popover, { anchorRef: (targetDropdownRef === null || targetDropdownRef === void 0 ? void 0 : targetDropdownRef.current) ? targetDropdownRef : controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size, view: view, moreButton: !!buttonMoreLabel && !!moreItems }, [className]), equalAnchorWidth: true },
                React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                    visibleItems.map(function (group) {
                        if (isOptionForCreate(group)) {
                            return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
                        }
                        return (React.createElement(Fragment, { key: group.key },
                            group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
                            group.items.map(function (item, i) {
                                return (React.createElement(Fragment, { key: "".concat(group.key, "-").concat(i) }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                            })));
                    }),
                    visibleItems.length === 0 && { labelForNotFound: labelForNotFound }
                // <Typography.Text className={cnSelectDropdown('LabelForNotFound')}>
                // </Typography.Text>
                ),
                buttonMoreLabel && moreItems && (React.createElement("div", { className: cnSelectDropdown('showAllItems') },
                    React.createElement(Button, { view: "link-secondary", iconRight: buttonMoreIcon, iconSize: "m", label: buttonMoreLabel, onClick: function () { return setIsModalOpen(true); } })))))));
};
