import { Component, ComponentDefinitionDefined, CustomRendererProps, Editor, TraitProperties } from 'grapesjs';
import { ComponentType, ReactElement, ReactNode, Ref, CSSProperties } from 'react';
import { RenderProjectProps } from '../rendererProject/types';
import { ComponentConfigSchema, ErrorType, RendererReactOptionsSchema } from '../typesSchema';
declare module 'grapesjs' {
    interface BlockProperties {
        content?: ContentType | (() => ContentType) | ReactElement<any, any>;
    }
}
export type EditorRenderProps = (props: {
    props: Record<string, any>;
    children: ReactNode;
    editor: Editor;
    component: Component;
    connectDom: Ref<any>;
}) => ReactElement;
export interface ComponentConfig extends Omit<ComponentConfigSchema, 'component' | 'props' | 'model' | 'wrapperStyle' | 'editorRender'> {
    /**
     * React Component
     * @example
     * component: ({ id, className, children, title, ...rest }) => {
     *   return (
     *    <div id={id} className={className} {...rest}>
     *      <h1>{title}</h1>
     *      {children}
     *    </div>
     *   )
     * }
     */
    component: ComponentType<any>;
    /**
     * Return an array of properties in a shape of GrapesJS traits.
     * @example
     * props: () => [
     *  {
     *    type: 'text',
     *    name: 'title',
     *    label: 'Title',
     *  }
     * ]
     */
    props?: () => TraitProperties[];
    /**
     * GrapesJS component model definition.
     * @example
     * model: {
     *  defaults: {
     *    draggable: false,
     *  }
     * }
     */
    model?: ComponentDefinitionDefined;
    /**
     * Allows you to customize the style of the wrapper element around your React component.
     *
     * In the editor, all React components are automatically wrapped in a container element.
     * This wrapper enables editing features like drag & drop, selection, and more.
     *
     * For most cases, styling the wrapper is sufficient. If you need deeper customization
     * (e.g., changing the wrapper element type or structure), use the `editorRender` option instead.
     *
     * @example
     * wrapperStyle: { display: 'block' }
     */
    wrapperStyle?: CSSProperties;
    /**
     * Custom render function for displaying the component inside the editor canvas.
     *
     * Use this when you want full control over how the component appears in the editor,
     * including custom wrappers, helper elements, or injected behavior.
     *
     * The `connectDom` function must be passed to the element that should be treated as the
     * component root (for selection, dragging, etc.).
     *
     * @example
     * component: MyComponent,
     * editorRender: ({ connectDom, editor, component, children, props }) => {
     *  return (
     *    <div ref={connectDom}>
     *      <div>Custom render of the component in the editor canvas</div>
     *      <MyComponent {...props}>{children}</MyComponent>
     *    </div>
     *  )
     * }
     */
    editorRender?: EditorRenderProps;
}
export interface RenderErrorProps extends RenderProjectProps {
    errorType: ErrorType;
}
export interface EditorProps {
    doc: Document;
    editor: Editor;
    frameView: CustomRendererProps['frameView'];
}
export interface WithEditorProps {
    /**
     * Properties passed only during the rendering in the editor.
     */
    editorProps?: EditorProps;
}
export interface RootComponentProps extends WithEditorProps {
    children?: ReactNode;
}
export interface RendererReactOptions extends Omit<RendererReactOptionsSchema, 'components' | 'errorComponent' | 'rootComponent' | 'headAfter' | 'bodyAfter'> {
    /**
     * Map of custom components.
     * @example
     * components: {
     *  MyComponent: {
     *   allowPropId: true,
     *   allowPropClassName: true,
     *   allowChildren: true,
     *   component: ({ id, className, children, title, ...rest }) => {
     *     return (
     *        <div id={id} className={className} {...rest}>
     *          <h1>{title}</h1>
     *          {children}
     *        </div>
     *      )
     *   },
     *  }
     * }
     */
    components?: Record<string, ComponentConfig>;
    /**
     * Custom error component.
     * This is used when, for example, you're trying to render a page with an invalid id.
     * @example
     * errorComponent: ({ errorType }) => <div>Error: {errorType}</div>
     */
    errorComponent?: ComponentType<RenderErrorProps>;
    /**
     * Custom root component that wraps the entire rendered project.
     * Usually used to provide a layout or context for the entire application.
     * @example
     * rootComponent: ({ children }) => <div>{children}</div>
     */
    rootComponent?: ComponentType<RootComponentProps>;
    /**
     * Custom react component to append at the end of the `<head>` element.
     * @example
     * headAfter: () => (<>
     *  <meta/>
     *  <script src="path/to/analytics.js"></script>
     * </>)
     */
    headAfter?: ComponentType<WithEditorProps>;
    /**
     * Custom react component to append at the end of the `<body>` element.
     * @example
     * bodyAfter: () => <div>Powered by MyApp</div>
     */
    bodyAfter?: ComponentType<WithEditorProps>;
}