import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
import { VideoFormatValue } from '../../../types/src/video-format-picker';
import { Component, Editor, StyleProps } from 'grapesjs';
import { TemplateResult } from 'lit';
import { CxBlockPicker } from './components/block-picker';
import { CxConfigManager } from './components/config-manager';
import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';

/**
 * @summary The `cx-content-builder` component is used to create and manage content blocks in a CMS.
 *
 * Set `enable-asset-format-controls` to expose the asset format, transformation,
 * download-format, and video-format-picker controls on image, video, gallery,
 * carousel, and timeline blocks. Off by default.
 *
 * @event cx-change - Emitted when the content builder changes.
 */
export default class CxContentBuilder extends CortexElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-block-picker': typeof CxBlockPicker;
        'cx-button': typeof CxButton;
        'cx-config-manager': typeof CxConfigManager;
        'cx-icon': typeof CxIcon;
        'cx-popup': typeof CxPopup;
        'cx-rte-bubble-menu': typeof CxRTEBubbleMenu;
        'cx-rte-table-generator': typeof CxRTETableGenerator;
        'cx-spinner': typeof CxSpinner;
    };
    private readonly localize;
    private readonly configsController;
    rteBubbleMenu: CxRTEBubbleMenu;
    container: HTMLDivElement;
    /**
     * Container for the content builder
     */
    contentBuilderRoot: HTMLDivElement;
    /**
     * Config manager
     */
    configManager: CxConfigManager;
    /**
     * Template picker
     */
    blockPicker: CxBlockPicker;
    addBlockPopup: HTMLElement;
    /**
     * Initial data for the content builder
     * This should be a JSON string representing the initial state of the content builder.
     * @default ''
     */
    initialData: string;
    /**
     * This property reflects the current device type being used in the content builder.
     * It can be one of the predefined device types such as 'desktop', 'tablet', or 'mobile'.
     * @default 'desktop'
     */
    device: Device['id'];
    /**
     * List of devices available in the content builder.
     * This is an array of device objects that define the different devices that can be used in the content builder.
     * Each device object should have properties like `name`, `canvasWidth`, `maxWidth`, etc.
     * @default AllDevices
     */
    devices: Device[];
    /**
     * Source URL for the canvas
     * This is the URL that will be used as the source for the canvas in the content builder.
     * If this is set, the content builder will not render automatically and will use the provided canvas source.
     * @default undefined
     */
    canvasSrc?: string;
    /**
     * Selector for the container element
     * This is the CSS selector that will be used to find the container element for the content builder.
     * If this is set, the content builder will use the specified container instead of the default one.
     * @default undefined
     */
    containerSelector?: string;
    /**
     * This property indicates whether the content builder should initialize automatically.
     * @default false
     */
    autoInit: boolean;
    /**
     * Page ID of the content builder.
     * This is mainly used as parameter for the anonymous API calls.
     * https://link.orangelogic.com/Tasks/41SJF4
     */
    pageId: string;
    /**
     * Whether the content builder should allow duplicate blocks.
     * @default false
     */
    allowDuplicateBlocks: boolean;
    /**
     * Whether to expose the asset format / transformation / download-format /
     * video-format-picker controls in the per-block config sidebar for
     * image, video, gallery, carousel, and timeline blocks.
     * @default false
     */
    enableAssetFormatControls: boolean;
    /**
     * The default language of the content builder.
     * This is the language that will be used to store the translatable texts.
     */
    defaultLanguage: string;
    /**
     * The list of languages available in the content builder.
     * This is the list of languages that will be used to store the translatable texts.
     */
    supportedLanguages: string[];
    /**
     * Mode of the content builder
     * This determines the mode in which the content builder operates.
     * It can be either 'template' or 'content'.
     * - 'template' mode allows editing of templates.
     * - 'content' mode allows editing of content blocks only.
     * @default EditorMode.Template
     */
    mode: EditorMode;
    /**
     * GrapesJS content builder instance
     * This is the main instance of the GrapesJS editor that will be used to manage the content blocks.
     * @default null
     */
    contentBuilder: Editor | null;
    /**
     * Ready state of the content builder
     * This indicates whether the content builder is ready to be used.
     * @default false
     */
    ready: boolean;
    editingComponent: Component | null;
    isGalleryConfigOpen: boolean;
    /**
     * Hovered element is the element that is currently hovered over in the content builder.
     * This is used as an anchor for the add block popup.
     */
    private hoveredComponent;
    private hoveredComponentPlacement;
    defaultRowGap: number;
    private containerDropdowns;
    private containerDropdownStateMap;
    private distance;
    private toolbar;
    private toolbarActive;
    private childSelected;
    private mappedSupportedLanguages;
    private mousePosition;
    private _teamSpaceRoles;
    get teamSpaceRoles(): TeamSpaceRole[];
    get mappedDefaultLanguage(): string;
    private canvasDocument;
    /**
     * Data source manager instance
     * This is the instance of the DataSourceManager that will be used to manage data sources in the content builder.
     * @default null
     */
    private _dsm;
    private get dsm();
    private hasBoundUpdate;
    private newlyAddedComponentTimeout;
    private readonly initializeCustomFrame;
    private containerDropdownObservers;
    private nextMapHoveredBadgeState;
    get isDesigner(): boolean;
    get isTemplateEditable(): boolean;
    get isMultiLanguage(): boolean;
    storeTemplate(id: string, data: Record<string, any>, update?: boolean): void;
    storeTranslatableText(id: string, data: string): void;
    storeTranslatableAttribute(id: string, data: Record<string, Record<string, string>>): void;
    private updateFrameSize;
    handleSupportedLanguagesChange(): void;
    handleDeviceChange(): void;
    handleContainerDropdownsChange(): void;
    handleHoveredComponentChange(): Promise<void>;
    enterFullscreen(): void;
    /**
     * This method returns the HTML content of the content builder, including the CSS styles.
     * It uses the content builder's content builder to get the HTML and CSS, and then
     * combines them into a single HTML string with a `<style>` tag containing the CSS.
     * The resulting HTML string can be used to render the content in a web page.
     * @returns HTML string
     */
    html(): string;
    /**
     * This method returns the JSON representation of the content builder's project data.
     * It filters the styles to include only those that have selectors starting with '#',
     * which typically indicates that they are styles for specific components or elements.
     * The resulting JSON string can be used to save or transfer the project data.
     * @returns JSON string
     */
    json(): string;
    /**
     * Return the count of changes made to the content builder.
     * @returns number
     */
    getDirtyCount(): number;
    /**
     * Reset the counter of changes
     * This method clears the dirty count of the content builder,
     * effectively resetting the count of changes made since the last reset.
     */
    resetDirtyCount(): void;
    /**
     * This method undoes the last change made in the content builder.
     */
    undo(): void;
    /**
     * This method redoes the last undone change in the content builder.
     */
    redo(): void;
    /**
     * Checks if exists an available undo
     * @returns boolean
     */
    canUndo(): boolean;
    /**
     * This method checks if there is an available redo action in the content builder.
     * It returns a boolean indicating whether a redo action can be performed.
     * @returns boolean
     */
    canRedo(): boolean;
    /**
     * Deselect all components in the content builder.
     */
    deselectAll(): void;
    tryToGetSelectedComponent(): Component | undefined;
    private fetchTeamSpaceRoles;
    private updateTranslatableTextsDataSourceEntries;
    private updateTemplatesDataSourceEntries;
    private getHoveredComponentPlacement;
    private mapHoveredComponent;
    private handleCanvasMouseMove;
    private handleCanvasScroll;
    private handleHorizontalScroll;
    private handleRootToolbarRightClick;
    private handleCanvasClick;
    private handleCanvasKeydown;
    private handleTemplateManagerUpdated;
    /**
     * This method handles changes in the data source by updating the components
     * that have a matching template ID with the new attributes and components.
     * It iterates through all components in the content builder and updates them
     * if their template ID matches the one from the data record.
     * @param record - The data record containing the new attributes and components.
     */
    private handleTemplatesDataSourceChange;
    private handleAddBlockClick;
    initBuilder(): Promise<void>;
    constructor();
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    handleBuilderPropsChange(): void;
    onRequestAsset(type: AssetTypeString): Promise<Asset>;
    onRequestDownloadFormat(assetIds: string[], formats?: Record<string, string[]>): Promise<{}>;
    onRequestVideoFormat(_assetId: string, _value?: VideoFormatValue): Promise<VideoFormatValue | null | undefined>;
    /**
     * This method retrieves all the components of the specified component.
     * It recursively traverses the component's children and adds them to the list.
     */
    private getAllComponents;
    /**
     * This method handles the configuration change event from the config manager.
     * It updates the component attributes, stores the template, and updates the CSS rules.
     * It also handles the case where the template is being detached.
     * @param event - The configuration change event containing the component and settings.
     */
    private handleConfigureChange;
    /**
     * This method handles the block selection event from the block picker.
     * It retrieves the templates for the selected block type and either adds a new component
     * or shows the template selection if templates are available.
     * @param event - The block select event containing the selected block type.
     */
    private handleBlockSelect;
    /**
     * This method handles the block picker with the specified type.
     * It retrieves the templates for the selected block type and either adds a new component
     * or shows the template selection if templates are available.
     */
    private handleBlockPickerWithType;
    /**
     * This method handles the template selection event from the block picker.
     * It retrieves the selected template by its ID, applies the styles, and adds the component to the content builder.
     * It also stores the template in the data source manager for future reference.
     * @param event - The template select event containing the selected template ID.
     */
    private handleTemplateSelect;
    /**
     * This method updates the component with the provided attributes, components, and styleProps.
     * It adds the attributes to the component, updates the components if provided, and sets the style properties for the component.
     * If a template ID or template child ID is present in the attributes, it adds the corresponding class to the component.
     * @param component - The GrapesJS component to be updated.
     * @param attributes - The attributes to be added to the component.
     * @param components - The components to be updated in the component.
     * @param styleProps - The style properties to be set for the component.
     */
    updateComponent(component: Component, { attributes, properties, styleProps, }: {
        attributes?: Record<string, string>;
        properties?: Record<string, unknown>;
        styleProps?: StyleProps;
    }): void;
    private handleOtherChange;
    private handleMouseMove;
    private getScrollableElements;
    private changeBadgeVisibility;
    private toggleToolbar;
    private toggleBadge;
    private handleToolbarAndBadge;
    private toggleToolbarAndBadge;
    private calculateDistance;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-content-builder': CxContentBuilder;
    }
}
