import type { CanvasSpot, Component } from 'grapesjs';
import type { CSSProperties } from 'react';
import type { WithEditorProps } from './common';
import type { DropTargetResult, DropTargetsFnProps } from './components';
import type { StudioLayoutComponentsConfigProps } from './layoutComponents';
export type CanvasSpotSlotsArray = (CanvasSpotSlotProps | null | false | undefined)[];
export type CanvasSpotPlacerPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
export declare enum CanvasSpotSlotPosition {
    topLeft = "top-left",
    topCenter = "top-center",
    topRight = "top-right",
    bottomLeft = "bottom-left",
    bottomCenter = "bottom-center",
    bottomRight = "bottom-right"
}
export interface ComponentCanvasSpotsProps extends WithEditorProps {
    spot: CanvasSpot;
    component: Component;
    result: ComponentCanvasSpotsResult;
    componentTheme: {
        isSymbol: boolean;
        bg: string;
        bgSoft: string;
        bgSoftX: string;
        border: string;
        txt: string;
    };
}
export interface CanvasSpotBadgeConfig {
    icon?: boolean;
    position?: CanvasSpotPlacerPosition;
    className?: string;
    style?: CSSProperties;
}
export interface CanvasSpotToolbarProps {
    badge?: boolean | Omit<CanvasSpotBadgeConfig, 'position'>;
    className?: string;
    style?: CSSProperties;
}
export interface CanvasSpotOverlayLayerProps {
    className?: string;
    style?: CSSProperties;
    /**
     * Remove default overlay classes and use only the provided `className`/`style`.
     */
    unstyled?: boolean;
}
export interface CanvasSpotOverlayProps extends CanvasSpotOverlayLayerProps {
}
export interface CanvasSpotOverlayContentProps extends CanvasSpotOverlayLayerProps {
    /**
     * Text content rendered inside the overlay message container.
     */
    text?: string;
}
export interface CanvasSpotCommonProps {
    className?: string;
    style?: CSSProperties;
    /**
     * Skip default visual classes applied by the canvas spot renderer.
     * Use `className`/`style` to provide the desired custom look.
     */
    unstyled?: boolean;
    /**
     * Render an extra overlay layer inside the canvas spot.
     */
    overlay?: CanvasSpotOverlayProps;
}
export interface CanvasSpotLayoutComponentProps {
    spot: CanvasSpot;
}
export type CanvasSpotLayoutComponentResult = StudioLayoutComponentsConfigProps | void | null | false;
export type CanvasSpotLayoutComponent = (props: CanvasSpotLayoutComponentProps) => CanvasSpotLayoutComponentResult;
export interface CanvasSpotSlotProps {
    id: string;
    position: `${CanvasSpotSlotPosition}`;
    layout: StudioLayoutComponentsConfigProps;
}
export interface CanvasSpotSelectConfig extends CanvasSpotCommonProps {
    toolbar?: false | CanvasSpotToolbarProps;
    slots?: CanvasSpotSlotsArray;
}
export interface CanvasSpotHoverConfig extends CanvasSpotCommonProps {
    badge?: boolean | CanvasSpotBadgeConfig;
}
export interface CanvasSpotTargetPlacerConfig {
    /**
     * Override GrapesJS placeholder color used while dragging over the target.
     * This value is assigned to the `--gjs-placeholder-background-color` CSS variable.
     */
    color?: string;
    /**
     * Additional CSS declarations applied to GrapesJS placeholder elements while dragging over the target.
     * Provide CSS declarations only, for example: `border-radius: 999px;`.
     */
    styles?: string;
}
export interface CanvasSpotTargetConfig extends CanvasSpotHoverConfig {
    /**
     * Customize drag placeholder styling for this target spot.
     */
    placer?: CanvasSpotTargetPlacerConfig;
}
export declare enum StudioCanvasSpotType {
    select = "select",
    hover = "hover",
    target = "target",
    dropTarget = "dropTarget",
    overlayContent = "overlayContent",
    spacing = "spacing"
}
export interface ComponentCanvasSpotsResult {
    [StudioCanvasSpotType.select]?: false | CanvasSpotSelectConfig;
    [StudioCanvasSpotType.hover]?: false | CanvasSpotHoverConfig;
    [StudioCanvasSpotType.target]?: false | CanvasSpotTargetConfig;
    [StudioCanvasSpotType.dropTarget]?: false | CanvasSpotTargetConfig;
    [StudioCanvasSpotType.spacing]?: boolean;
}
export type CanvasSpotsFn = (props: ComponentCanvasSpotsProps) => ComponentCanvasSpotsResult | Promise<ComponentCanvasSpotsResult>;
export interface SpotSlotsContainerProps {
    position: `${CanvasSpotSlotPosition}` | 'top' | 'bottom';
    slots: CanvasSpotSlotProps[];
}
export type SpotSlotsContainerFn = (props: SpotSlotsContainerProps) => CanvasSpotCommonProps | void | undefined;
export type CanvasDropTargetsResult = boolean | DropTargetResult;
export type CanvasDropTargetsFn = (props: DropTargetsFnProps) => CanvasDropTargetsResult | Promise<CanvasDropTargetsResult>;
export interface CanvasConfig {
    /**
     * Customize canvas spot slots container with custom properties.
     * @example
     * spotSlotsContainer: ({ position }) => {
     *  if (position !== 'bottom-center') return;
     *
     *  return (
     *   className: 'custom-class',
     *   style: { backgroundColor: 'red' },
     *  }
     * }
     */
    spotSlotsContainer?: SpotSlotsContainerFn;
    /**
     * Canvas spots configuration.
     */
    canvasSpots?: CanvasSpotsFn;
    /**
     * Globally control drop targets shown during drag and drop.
     *
     * Return:
     * - `false` to disable drop targets for the current drag.
     * - `true` to proceed with the component-level `dropTargets` logic.
     * - an array/object result to provide custom drop targets directly.
     */
    dropTargets?: CanvasDropTargetsFn;
}