"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { lazy, Suspense, useCallback, useEffect, useState } from "react";
import { getRichTextProfile } from "../services/contentService";
import { useRichTextProfileParsed } from "./richtext/hooks/useRichTextProfile";
const RichTextEditorComponent = lazy(() => import("./RichTextEditorComponent").then((module) => ({ default: module.RichTextEditorComponent })));
export function RichTextEditor({ field, readOnly, updateFieldValue, isFocusedField, }) {
    const [isMounted, setIsMounted] = useState(false);
    const profilePath = field.customProperties?.profile;
    const itemId = field.descriptor.item.id;
    const profileServiceCall = useCallback((path) => getRichTextProfile(path, itemId), [itemId]);
    useEffect(() => {
        setIsMounted(true);
    }, []);
    const { profile, loading, error } = useRichTextProfileParsed(profilePath, profileServiceCall);
    // Show loading state while profile is being fetched
    if (loading) {
        return (_jsx("div", { style: { padding: "8px", color: "#666" }, children: "Loading editor profile..." }));
    }
    // Show error state if profile failed to load
    if (error) {
        return (_jsxs("div", { style: { padding: "8px", color: "#d32f2f" }, children: ["Error loading RTE profile from ", profilePath, ": ", error.message] }));
    }
    if (!isMounted) {
        return (_jsx("div", { style: { padding: "8px", color: "#666" }, children: "Loading editor..." }));
    }
    return (_jsx(Suspense, { fallback: _jsx("div", { style: { padding: "8px", color: "#666" }, children: "Loading editor..." }), children: _jsx(RichTextEditorComponent, { field: field, readOnly: readOnly, profile: profile, updateFieldValue: updateFieldValue, showControls: isFocusedField }) }));
}
//# sourceMappingURL=RichTextEditor.js.map