import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useCallback, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Button, Checkbox, Input, UiFocusManager, UiSubmenuHeader } from "@gooddata/sdk-ui-kit";
import { saveFilterView } from "../../../../model/commands/filters.js";
import { useDashboardDispatch } from "../../../../model/react/DashboardStoreProvider.js";
export function AddFilterView({ onClose, onSave, titleId }) {
    const intl = useIntl();
    const [name, setName] = useState("");
    const [isDefault, setDefault] = useState(false);
    const isSaveEnabled = name.trim().length > 0;
    const dispatch = useDashboardDispatch();
    const onInputChange = (value) => setName(String(value));
    const handleSave = useCallback(() => {
        if (isSaveEnabled) {
            dispatch(saveFilterView(name.trim(), isDefault));
            onSave();
        }
    }, [isSaveEnabled, isDefault, name, dispatch, onSave]);
    return (_jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, children: _jsxs("div", { className: "configuration-panel configuration-panel__filter-view__add", children: [
                _jsx(UiSubmenuHeader, { title: intl.formatMessage({ id: "filters.filterViews.add.title" }), onBack: onClose, backAriaLabel: intl.formatMessage({ id: "menu.back" }), useShortenedTitle: false, height: "medium", titleId: titleId }), _jsxs("div", { className: "configuration-category", children: [
                        _jsx(Input, { value: name, isSmall: true, onChange: onInputChange, label: intl.formatMessage({ id: "filters.filterViews.add.nameLabel" }), placeholder: intl.formatMessage({ id: "filters.filterViews.add.namePlaceholder" }), onEnterKeyPress: handleSave, autofocus: true }), _jsx("div", { className: "gd-filter-view-add-checkbox-row", children: _jsx(Checkbox, { value: isDefault, onChange: setDefault, text: intl.formatMessage({ id: "filters.filterViews.add.setAsDefaultLabel" }) }) }), _jsx("div", { className: "gd-message information gd-filter-view-add-hint", children: _jsx(FormattedMessage, { id: "filters.filterViews.add.hint" }) })
                    ] }), _jsx("div", { className: "configuration-panel-footer", children: _jsxs("div", { className: "configuration-panel-footer__content", children: [
                            _jsx(Button, { size: "small", onClick: onClose, className: "gd-button gd-button-secondary", children: _jsx(FormattedMessage, { id: "filters.filterViews.add.cancelButton" }) }), _jsx(Button, { intent: "action", size: "small", onClick: handleSave, disabled: !isSaveEnabled, children: _jsx(FormattedMessage, { id: "filters.filterViews.add.saveButton" }) })
                        ] }) })
            ] }) }));
}
