import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useState } from "react";
import { compact } from "lodash-es";
import { useIntl } from "react-intl";
import { ConfirmDialog, Input, Message, Typography } from "@gooddata/sdk-ui-kit";
import { messages } from "../../../locales.js";
import { DASHBOARD_TITLE_MAX_LENGTH } from "../../constants/dashboard.js";
import { IntlWrapper } from "../../localization/IntlWrapper.js";
/**
 * @internal
 */
export const SaveAsNewDashboardDialog = memo(function SaveAsNewDashboardDialog({ onCancel = () => { }, isDashboardLoaded, isDashboardSaving, dashboardTitle: dashboardTitleProp, onSubmit, isInEditMode, isKpiWidgetEnabled, }) {
    const intl = useIntl();
    const getDefaultDashboardTitle = useCallback(() => {
        return intl.formatMessage({ id: "dialogs.save.as.new.default.title" }, {
            title: dashboardTitleProp,
        });
    }, [dashboardTitleProp, intl]);
    const [dashboardTitle, setDashboardTitle] = useState(getDefaultDashboardTitle());
    const canCreateDashboard = useCallback(() => {
        return isDashboardLoaded && !isDashboardSaving;
    }, [isDashboardLoaded, isDashboardSaving]);
    const handleTitleFocus = useCallback((e) => {
        e.target.select();
    }, []);
    const handleTitleBlur = useCallback((e) => {
        const newDashboardTitle = e.target.value.trim();
        setDashboardTitle(newDashboardTitle === "" ? getDefaultDashboardTitle() : newDashboardTitle);
    }, [getDefaultDashboardTitle]);
    const handleTitleChange = (value) => {
        setDashboardTitle(value);
    };
    const onSubmitHandler = useCallback(() => {
        const title = dashboardTitle.trim();
        if (canCreateDashboard() && title !== "") {
            onSubmit(title, true, // switch to the new dashboard
            // do not reuse the filter context in edit mode, create a new one with the current filter state
            // otherwise use the original filter context values when creating a copy
            !isInEditMode);
        }
    }, [canCreateDashboard, dashboardTitle, isInEditMode, onSubmit]);
    const getNoteText = useCallback(() => {
        const messageId = compact([isKpiWidgetEnabled && messages.saveAsNewAlertsMessage.id]).at(0);
        return messageId ? intl.formatMessage({ id: messageId }) : "";
    }, [intl, isKpiWidgetEnabled]);
    const noteText = getNoteText();
    return (_jsxs(ConfirmDialog, { onCancel: onCancel, onSubmit: onSubmitHandler, isPositive: true, className: "s-dialog save-as-new-dialog", headline: intl.formatMessage({ id: "dialogs.save.as.new.title" }), cancelButtonText: intl.formatMessage({ id: "cancel" }), submitButtonText: intl.formatMessage({ id: "create.dashboard" }), isSubmitDisabled: isDashboardSaving || dashboardTitle.trim() === "", children: [
            _jsx(Typography, { tagName: "p", className: "dashboard-note", children: intl.formatMessage({ id: "dialogs.save.as.new.desc" }) }), _jsx("div", { className: "dashboard-title", children: _jsx(Input, { autofocus: true, maxlength: DASHBOARD_TITLE_MAX_LENGTH, onFocus: handleTitleFocus, onBlur: handleTitleBlur, value: dashboardTitle, placeholder: getDefaultDashboardTitle(), onChange: handleTitleChange }) }), noteText ? _jsx(Message, { type: "progress", children: noteText }) : null] }));
});
export const SaveAsDialogRendererIntl = SaveAsNewDashboardDialog;
export function SaveAsDialogRenderer(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(SaveAsDialogRendererIntl, { ...props }) }));
}
//# sourceMappingURL=SaveAsDialogRenderer.js.map