import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { useIntl } from "react-intl";
import { Separator, Typography } from "@gooddata/sdk-ui-kit";
import { simplifyText } from "@gooddata/util";
import { messages } from "../../../../../../../locales.js";
import { useDashboardSelector } from "../../../../../../../model/react/DashboardStoreProvider.js";
import { useDashboardUserInteraction } from "../../../../../../../model/react/useDashboardUserInteraction.js";
import { selectIsWhiteLabeled } from "../../../../../../../model/store/config/configSelectors.js";
import { PopupHeader } from "./PopupHeader.js";
function Action({ title, description, onClick }) {
    const classNames = cx("attribute-filter__limit__popup__action-select__option", `s-add-limit-${simplifyText(title)}`);
    return (_jsxs("div", { className: classNames, onClick: onClick, children: [
            _jsxs("div", { children: [
                    _jsx(Typography, { tagName: "h3", className: "attribute-filter__limit__popup__action-select__title", children: title }), _jsx("p", { className: "attribute-filter__limit__popup__action-select__description", children: description })
                ] }), _jsx("div", { className: "gd-icon-chevron-right attribute-filter__limit__popup__action-select__icon" })
        ] }));
}
export function ActionSelectionPage({ onAddFilters, onAddLimitingItems, onClose, }) {
    const intl = useIntl();
    const { attributeFilterInteraction } = useDashboardUserInteraction();
    const isWhiteLabeled = useDashboardSelector(selectIsWhiteLabeled);
    const onChooseParentFilters = () => {
        onAddFilters();
        attributeFilterInteraction("attributeFilterLimitAddParentFilterOptionClicked");
    };
    const onChooseMetrics = () => {
        onAddLimitingItems();
        attributeFilterInteraction("attributeFilterLimitAddMetricOptionClicked");
    };
    return (_jsxs(_Fragment, { children: [
            _jsx(PopupHeader, { title: intl.formatMessage(messages.filterAddItemTitle), onClose: onClose }), _jsxs("div", { className: "attribute-filter__limit__popup__content", children: [
                    _jsx(Action, { onClick: onChooseParentFilters, title: intl.formatMessage({ id: "attributesDropdown.valuesLimiting.addFilters.title" }), description: intl.formatMessage({
                            id: "attributesDropdown.valuesLimiting.addFilters.description",
                        }) }), _jsx(Separator, {}), _jsx(Action, { onClick: onChooseMetrics, title: intl.formatMessage({
                            id: "attributesDropdown.valuesLimiting.addLimitingItem.title",
                        }), description: intl.formatMessage({ id: "attributesDropdown.valuesLimiting.addLimitingItem.description" }, {
                            a: (chunk) => isWhiteLabeled ? (_jsx("span", {})) : (_jsx("a", { href: "https://www.gooddata.com/docs/cloud/create-dashboards/filters/", rel: "noopener noreferrer", target: "_blank", className: "attribute-filter__limit__popup__action-select__option__link", children: chunk })),
                        }) })] })
        ] }));
}
//# sourceMappingURL=ActionSelectionPage.js.map