import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useMemo, useState } from "react";
import { isEqual } from "lodash-es";
import { FormattedMessage, injectIntl } from "react-intl";
import { IntlWrapper } from "@gooddata/sdk-ui";
import { Button } from "../Button/Button.js";
import { ChartSortingDropdown } from "./ChartSortingDropdown.js";
import { ChartSortingDropdownBody } from "./ChartSortingDropdownBody.js";
function ChartSorting({ currentSort, availableSorts, intl, bucketItems, buttonNode, onCancel, onApply, }) {
    const [currentSelectedSort, setCurrentSort] = useState(currentSort);
    const handleApply = useCallback(() => {
        onApply(currentSelectedSort);
    }, [onApply, currentSelectedSort]);
    const onSelect = (item) => {
        setCurrentSort(item);
    };
    const isApplyEnabled = useMemo(() => !isEqual(currentSort, currentSelectedSort), [currentSort, currentSelectedSort]);
    return (_jsxs(ChartSortingDropdownBody, { buttonNode: buttonNode, onClose: onCancel, children: [
            _jsx("div", { className: "gd-sort-charting-dropdown-header s-sort-charting-dropdown-header", children: _jsx(FormattedMessage, { id: "sorting.dropdown.header" }) }), _jsx("div", { className: "gd-sort-charting-body gd-sort-charting-dropdown", children: _jsx(ChartSortingDropdown, { currentSort: currentSelectedSort, availableSorts: availableSorts, bucketItems: bucketItems, intl: intl, onSelect: onSelect }) }), _jsxs("div", { className: "gd-chart-sorting-dropdown-footer", children: [
                    _jsx(Button, { className: "gd-button-secondary gd-button-small s-sorting-dropdown-cancel", value: intl.formatMessage({ id: "cancel" }), onClick: onCancel }), _jsx(Button, { className: "gd-button-action gd-button-small s-sorting-dropdown-apply", value: intl.formatMessage({ id: "apply" }), onClick: handleApply, disabled: !isApplyEnabled })
                ] })
        ] }));
}
/**
 * @internal
 */
export const ChartSortingWithIntl = injectIntl(ChartSorting);
/**
 * @internal
 */
export function ChartSortingDialog(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(ChartSortingWithIntl, { ...props }) }));
}
