import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage, defineMessages, useIntl } from "react-intl";
import { bem } from "../@ui/@utils/bem.js";
import { UiButton } from "../@ui/UiButton/UiButton.js";
import { useId } from "../utils/useId.js";
const { b, e } = bem("gd-ui-kit-parameter-control");
const messages = defineMessages({
    valueLabel: { id: "parameter_filter.dropdown.value_label" },
    reset: { id: "parameter_filter.dropdown.reset" },
    previewLabel: { id: "parameter_filter.dropdown.preview_label" },
    apply: { id: "parameter_filter.dropdown.apply" },
    cancel: { id: "cancel" },
});
/**
 * Presentational dropdown shared by the parameter control variants; variants own the draft state,
 * parsing, and validation.
 *
 * @internal
 */
export function ParameterControlDropdown({ name, draft, onDraftChange, inputProps, inputId: inputIdProp, ariaAttributes, errorMessage, previewValue, onReset, onApply, onCancel, }) {
    const intl = useIntl();
    const generatedInputId = useId();
    const inputId = inputIdProp ?? generatedInputId;
    return (_jsxs("div", { ...ariaAttributes, className: `${b({ dropdown: true })} overlay gd-dialog gd-dropdown`, "data-testid": "parameter-control-dropdown", children: [
            _jsxs("div", { className: cx(e("dropdown-field"), { "has-error": !!errorMessage }), children: [
                    _jsxs("div", { className: e("dropdown-field-header"), children: [
                            _jsx("label", { htmlFor: inputId, className: e("dropdown-label"), children: intl.formatMessage(messages.valueLabel) }), onReset ? (_jsx("button", { type: "button", className: e("dropdown-reset"), "data-testid": "parameter-control-dropdown-reset", onClick: onReset, children: intl.formatMessage(messages.reset) })) : null] }), _jsx("input", { ...inputProps, id: inputId, className: `${e("dropdown-input")} gd-input-field`, "data-testid": "parameter-control-dropdown-input", value: draft, onChange: (event) => onDraftChange(event.target.value) }), errorMessage ? (_jsx("div", { className: e("dropdown-error"), "data-testid": "parameter-control-dropdown-error", children: errorMessage })) : null] }), _jsx("div", { className: e("dropdown-divider") }), _jsxs("div", { className: e("dropdown-preview"), "data-testid": "parameter-control-dropdown-preview", children: [
                    _jsx("span", { className: e("dropdown-preview-label"), children: intl.formatMessage(messages.previewLabel) }), _jsx("span", { className: e("dropdown-preview-text"), children: _jsx(FormattedMessage, { id: "parameter_filter.dropdown.preview", values: {
                                name,
                                value: previewValue,
                                strong: (chunks) => _jsx("strong", { children: chunks }),
                            } }) })
                ] }), _jsxs("div", { className: e("dropdown-footer"), children: [
                    _jsx(UiButton, { variant: "secondary", size: "small", label: intl.formatMessage(messages.cancel), dataTestId: "parameter-control-dropdown-cancel", onClick: onCancel }), _jsx(UiButton, { variant: "primary", size: "small", label: intl.formatMessage(messages.apply), dataTestId: "parameter-control-dropdown-apply", onClick: onApply, isDisabled: !!errorMessage })
                ] })
        ] }));
}
