import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2019-2025 GoodData Corporation
import { useState } from "react";
import { isEqual } from "lodash-es";
import { defineMessages, useIntl } from "react-intl";
import { UiButton } from "../@ui/UiButton/UiButton.js";
import { Dropdown } from "../Dropdown/Dropdown.js";
import { InvertableSelect, } from "../List/InvertableSelect/InvertableSelect.js";
import { useInvertableSelectionStatusText } from "../List/InvertableSelect/InvertableSelectSelectionStatus.js";
import { SeparatorLine } from "../SeparatorLine/SeparatorLine.js";
const messages = defineMessages({
    apply: {
        id: "gs.list.apply",
    },
    cancel: {
        id: "gs.list.cancel",
    },
});
/**
 * @internal
 */
export function DropdownInvertableSelect(props) {
    const { title, options, onChange, width = 240, alignPoints, getItemTitle, getItemKey, initialValue, initialIsInverted, initialSearchString, header, renderStatusBar, renderSearchBar, renderNoData, } = props;
    const [searchString, setSearchString] = useState(initialSearchString ?? "");
    const [committedSelection, setCommitedSelection] = useState(initialValue ?? []);
    const [committedIsInverted, setCommitedIsInverted] = useState(initialIsInverted ?? true);
    const [selection, setSelection] = useState(initialValue ?? []);
    const [isInverted, setIsInverted] = useState(initialIsInverted ?? true);
    const selectionStatusText = useInvertableSelectionStatusText(committedSelection, committedIsInverted, getItemTitle);
    const buttonText = title ? `${title}: ${selectionStatusText}` : selectionStatusText;
    const onSearch = (searchString) => {
        setSearchString(searchString);
    };
    const onSelect = (selectedItems, isInverted) => {
        setSelection(selectedItems);
        setIsInverted(isInverted);
    };
    const resetTemporarySelection = () => {
        setSelection(committedSelection);
        setIsInverted(committedIsInverted);
        setSearchString("");
    };
    const onApply = () => {
        setCommitedSelection(selection);
        setCommitedIsInverted(isInverted);
        onChange(selection, isInverted);
    };
    const filteredOptions = options.filter((option) => {
        return !searchString || getItemTitle(option).toLowerCase().includes(searchString.toLowerCase());
    });
    return (_jsx(Dropdown, { alignPoints: alignPoints, onOpenStateChanged: (isOpen) => {
            if (!isOpen) {
                resetTemporarySelection();
            }
        }, renderButton: ({ toggleDropdown }) => (_jsx(UiButton, { label: buttonText, onClick: toggleDropdown, size: "small", variant: "secondary", iconAfter: "navigateDown" })), renderBody: ({ closeDropdown }) => {
            const isEmptySelection = !isInverted && selection.length === 0;
            const isSelectionEqual = isEqual(selection, committedSelection) && isInverted === committedIsInverted;
            return (_jsxs(_Fragment, { children: [header, _jsx(InvertableSelect, { width: width, items: filteredOptions, getItemTitle: getItemTitle, getItemKey: getItemKey, isInverted: isInverted, searchString: searchString, onSearch: onSearch, selectedItems: selection, onSelect: onSelect, renderStatusBar: renderStatusBar, renderSearchBar: renderSearchBar, renderNoData: renderNoData, totalItemsCount: filteredOptions.length }), _jsx(DropdownInvertableSelectActions, { onApply: () => {
                            onApply();
                            closeDropdown();
                        }, onCancel: () => {
                            closeDropdown();
                        }, isApplyDisabled: isEmptySelection || isSelectionEqual })] }));
        } }));
}
function DropdownInvertableSelectActions(props) {
    const { onApply, isApplyDisabled, onCancel } = props;
    const intl = useIntl();
    const cancelText = intl.formatMessage(messages.cancel);
    const applyText = intl.formatMessage(messages.apply);
    return (_jsx(_Fragment, { children: _jsxs("div", { className: "gd-invertable-select-actions", children: [_jsx(SeparatorLine, {}), _jsxs("div", { className: "gd-invertable-select-actions-buttons", children: [_jsx(UiButton, { variant: "secondary", size: "small", onClick: onCancel, label: cancelText }), _jsx(UiButton, { variant: "primary", size: "small", onClick: onApply, label: applyText, isDisabled: isApplyDisabled })] })] }) }));
}
//# sourceMappingURL=DropdownInvertableSelect.js.map