"use strict";
// @ts-nocheck
exports.__esModule = true;
exports.SelectDropdown = exports.defaultSelectDropdownPropForm = exports.selectDropdownform = void 0;
var tslib_1 = require("tslib");
require("./SelectDropdown.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_transition_group_1 = require("react-transition-group");
var useSelect_1 = require("../../../hooks/useSelect/useSelect");
var IconArrowRight_1 = require("../../../icons/IconArrowRight/IconArrowRight");
var IconClose_1 = require("../../../icons/IconClose/IconClose");
var bem_1 = require("../../../utils/bem");
var cnForCssTransition_1 = require("../../../utils/cnForCssTransition");
var fabricIndex_1 = require("../../../utils/fabricIndex");
var Button_1 = require("../../Button/Button");
var Modal_1 = require("../../Modal/Modal");
var Popover_1 = require("../../Popover/Popover");
var Typography_1 = require("../../Typography/Typography");
var SelectCreateButton_1 = require("../SelectCreateButton/SelectCreateButton");
var SelectGroupLabel_1 = require("../SelectGroupLabel/SelectGroupLabel");
exports.selectDropdownform = ['default', 'brick', 'round'];
exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
var cnSelectDropdown = (0, bem_1.cn)('SelectDropdown');
var cnSelectModal = (0, bem_1.cn)('SelectModal');
var cnSelectDropdownCssTransition = (0, cnForCssTransition_1.cnForCssTransition)(cnSelectDropdown);
// eslint-disable-next-line @typescript-eslint/no-redeclare
var SelectDropdown = function (props) {
    var _a = (0, tslib_1.__read)((0, react_1.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_1.IconArrowRight : _b, buttonMoreLabel = props.buttonMoreLabel, moreItems = props.moreItems, targetDropdownRef = props.targetDropdownRef;
    var getIndex = (0, fabricIndex_1.fabricIndex)(-1);
    var indent = form === 'round' ? 'increased' : 'normal';
    return (react_1["default"].createElement(react_1["default"].Fragment, null,
        react_1["default"].createElement(Modal_1.Modal, { isOpen: isModalOpen, hasOverlay: true, width: "full", onOverlayClick: function () { return setIsModalOpen(false); }, onEsc: function () { return setIsModalOpen(false); } },
            react_1["default"].createElement("div", { className: cnSelectModal() },
                react_1["default"].createElement(Button_1.Button, { view: "ghost", iconRight: IconClose_1.IconClose, className: "Modal-CloseInner", onClick: function () { return setIsModalOpen(false); } }),
                react_1["default"].createElement(Typography_1.Typography.Text, { size: "xs", weight: "bold", transform: "uppercase" }, "All tags"),
                react_1["default"].createElement("div", { className: cnSelectModal('Items') }, moreItems &&
                    moreItems.map(function (item, i) {
                        return (react_1["default"].createElement(react_1.Fragment, { key: "modal-item-".concat(i) }, renderItem((0, tslib_1.__assign)({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                    })))),
        react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
            react_1["default"].createElement(Popover_1.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_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                    visibleItems.map(function (group) {
                        if ((0, useSelect_1.isOptionForCreate)(group)) {
                            return (react_1["default"].createElement(SelectCreateButton_1.SelectCreateButton, (0, tslib_1.__assign)({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
                        }
                        return (react_1["default"].createElement(react_1.Fragment, { key: group.key },
                            group.group && getGroupLabel && (react_1["default"].createElement(SelectGroupLabel_1.SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
                            group.items.map(function (item, i) {
                                return (react_1["default"].createElement(react_1.Fragment, { key: "".concat(group.key, "-").concat(i) }, renderItem((0, tslib_1.__assign)({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                            })));
                    }),
                    visibleItems.length === 0 && { labelForNotFound: labelForNotFound }
                // <Typography.Text className={cnSelectDropdown('LabelForNotFound')}>
                // </Typography.Text>
                ),
                buttonMoreLabel && moreItems && (react_1["default"].createElement("div", { className: cnSelectDropdown('showAllItems') },
                    react_1["default"].createElement(Button_1.Button, { view: "link-secondary", iconRight: buttonMoreIcon, iconSize: "m", label: buttonMoreLabel, onClick: function () { return setIsModalOpen(true); } })))))));
};
exports.SelectDropdown = SelectDropdown;
