import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2021-2026 GoodData Corporation
import { defineMessage, useIntl } from "react-intl";
import { EditableLabel } from "@gooddata/sdk-ui-kit";
import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
import { selectDashboardTitle } from "../../../model/store/meta/metaSelectors.js";
import { DASHBOARD_TITLE_MAX_LENGTH } from "../../constants/dashboard.js";
import { TitleWrapper } from "./TitleWrapper.js";
const placeholderMessage = defineMessage({ id: "untitled" });
/**
 * @alpha
 */
export function EditableTitle({ title, onTitleChanged }) {
    const intl = useIntl();
    const dashboardTitle = useDashboardSelector(selectDashboardTitle);
    return (_jsx(TitleWrapper, { children: _jsx(EditableLabel, { value: title, onSubmit: onTitleChanged, maxRows: 1, maxLength: DASHBOARD_TITLE_MAX_LENGTH, className: "s-gd-dashboard-title s-dash-title dash-title editable", isEditableLabelWidthBasedOnText: true, autofocus: !dashboardTitle, placeholder: intl.formatMessage(placeholderMessage), children: title }) }));
}
