"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MoreAttributesButton = void 0;
var react_1 = __importStar(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var classnames_1 = __importDefault(require("classnames"));
var ramda_1 = require("ramda");
var Button_1 = __importDefault(require("@mui/material/Button"));
var ListItem_1 = __importDefault(require("@mui/material/ListItem"));
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var Add_1 = __importDefault(require("@mui/icons-material/Add"));
var AttributeListItem_1 = require("../AttributeListItem");
var SelectionPopup_1 = require("../SelectionPopup");
var Highlighter_1 = require("../Highlighter");
var useKeyboardNavigation_1 = require("../hooks/useKeyboardNavigation");
var VirtualGroupedList_1 = require("../VirtualGroupedList");
var useMoreAttributesItems_1 = require("./useMoreAttributesItems");
var constants_1 = require("./constants");
var styles_1 = require("./styles");
var MoreAttributesButton = function (_a) {
    var _b;
    var label = _a.label, _c = _a.popupTitle, popupTitle = _c === void 0 ? label : _c, data = _a.data, parent = _a.parent, dense = _a.dense, onApply = _a.onApply, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
    var styles = (0, styles_1.useStyles)();
    var inputRef = (0, react_1.useRef)(null);
    var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
    var togglePopupOpen = function () { return setIsOpen(!isOpen); };
    var closePopup = function () { return setIsOpen(false); };
    var _f = (0, react_1.useState)(''), filter = _f[0], setFilter = _f[1];
    var clearFilter = function () { return setFilter(''); };
    var _g = (0, react_1.useState)([]), selectedItems = _g[0], setSelectedItems = _g[1];
    var clearSelectedItems = function () { return setSelectedItems([]); };
    var _h = (0, useMoreAttributesItems_1.useMoreAttributesItems)({ data: data, parent: parent, filter: filter }), items = _h.items, hasGroups = _h.hasGroups, parentGroupLength = _h.parentGroupLength, attributesGroupLength = _h.attributesGroupLength;
    var addSelectedAttributes = function () {
        if (selectedItems.length > 0) {
            onApply((0, ramda_1.pluck)('attrType', selectedItems));
        }
    };
    var handleListItemClick = (0, react_1.useCallback)(function (item, checked) {
        setSelectedItems((0, ramda_1.ifElse)((0, ramda_1.always)(checked), (0, ramda_1.append)(item), (0, ramda_1.reject)((0, ramda_1.propEq)('id', item.id)))(selectedItems));
    }, [selectedItems]);
    var getItemSize = (0, react_1.useCallback)(function (i, item) { return (item.items ? constants_1.ITEM_GROUP_TITLE_HEIGHT : constants_1.ITEM_HEIGHT); }, []);
    var handleSearchOnEnter = (0, react_1.useCallback)(function (_a) {
        var item = _a.item;
        handleListItemClick(item, (0, ramda_1.not)((0, ramda_1.any)((0, ramda_1.propEq)('id', item.id))(selectedItems)));
    }, [handleListItemClick, selectedItems]);
    var _j = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
        items: items,
        open: isOpen,
        onSelectFocusedItem: handleSearchOnEnter,
        selectedItems: selectedItems
    }), focusIndex = _j.focusIndex, handleKeyDown = _j.handleKeyDown;
    var focusIndexRef = (0, react_1.useRef)(null);
    focusIndexRef.current = focusIndex;
    var groupsCount = hasGroups ? (parentGroupLength ? 1 : 0) + (attributesGroupLength ? 1 : 0) : 0;
    var itemsCount = items.length - groupsCount;
    var listHeight = Math.min(constants_1.MAX_LIST_CONTAINER_HEIGHT, constants_1.ITEM_HEIGHT * itemsCount + constants_1.ITEM_GROUP_TITLE_HEIGHT * groupsCount);
    var containerHeight = Math.max(constants_1.MIN_CONTAINER_HEIGHT, listHeight + constants_1.CONTAINER_HEADER_HEIGHT);
    var listItemRenderer = (0, react_1.useCallback)(function (style, _a, index) {
        var _b;
        var item = _a.item, _c = _a.level, level = _c === void 0 ? 0 : _c;
        var isChecked = (0, ramda_1.any)((0, ramda_1.propEq)('id', item.id))(selectedItems);
        var isFocused = focusIndexRef.current === index;
        return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { key: item.uri, onClick: handleListItemClick, checked: isChecked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: item.label, highlight: filter }), labelInText: item.label, style: style, isFocused: isFocused, isRequired: !!((_b = item.attrType) === null || _b === void 0 ? void 0 : _b.required), LogoIcon: item.LogoIcon }));
    }, [filter, handleListItemClick, selectedItems]);
    var renderGroupTitle = (0, react_1.useCallback)(function (style, item) { return (react_1.default.createElement(ListItem_1.default, { component: 'div', className: styles.subHeader, style: style, key: "group-".concat(item.item.id) }, item.item.label)); }, []);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.moreAttributes, (_b = {}, _b[styles.dense] = dense, _b)) },
        react_1.default.createElement(Button_1.default, { color: "primary", onClick: togglePopupOpen, ref: inputRef, className: styles.moreButton, disabled: disabled },
            react_1.default.createElement(Add_1.default, { classes: { root: styles.icon } }),
            react_1.default.createElement("div", { className: styles.buttonLabel }, label)),
        react_1.default.createElement(SelectionPopup_1.SelectionPopup, { open: isOpen, className: (0, classnames_1.default)(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: (0, ramda_1.pipe)(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: constants_1.LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
            react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, disableHorizontalScrollbar: true, items: items, height: listHeight, focusIndex: focusIndex }),
            items.length === 0 && (react_1.default.createElement("div", { className: styles.noResultsCaptionContainer },
                react_1.default.createElement(Typography_1.default, { variant: "caption", display: "block", gutterBottom: true }, ui_i18n_1.default.text('No results found')))))));
};
exports.MoreAttributesButton = MoreAttributesButton;
