import { default as CxCard } from '../../../../../atoms/src/components/card/card.ts';
import { default as CxDialog } from '../../../../../atoms/src/components/dialog/dialog.ts';
import { default as CxGrid } from '../../../../../atoms/src/components/grid/grid.ts';
import { default as CxGridItem } from '../../../../../atoms/src/components/grid-item/grid-item.ts';
import { default as CxLineClamp } from '../../../../../atoms/src/components/line-clamp/line-clamp.ts';
import { default as CxResizeObserver } from '../../../../../atoms/src/components/resize-observer/resize-observer.ts';
import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
import { default as CxSpinner } from '../../../../../atoms/src/components/spinner/spinner.ts';
import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
import { BlockType } from '../../../../../types/src/content-builder';
import { Component } from 'grapesjs';

export type CxContentBuilderBlockSelectEvent = CustomEvent<{
    amount?: number;
    index?: number;
    selectedComponent?: Component;
    type: BlockType;
}>;
export type CxContentBuilderTemplateSelectEvent = CustomEvent<{
    amount?: number;
    id: string;
    index?: number;
    selectedComponent?: Component;
}>;
/**
 * @summary The `cx-block-picker` component is used to select a block type or a template for the content builder.
 *
 * @event cx-content-builder-block-select - Emitted when the user selects a block type.
 * @event cx-content-builder-template-select - Emitted when the user selects a template.
 */
export default class CxBlockPicker extends CortexElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-card': typeof CxCard;
        'cx-dialog': typeof CxDialog;
        'cx-grid': typeof CxGrid;
        'cx-grid-item': typeof CxGridItem;
        'cx-line-clamp': typeof CxLineClamp;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-space': typeof CxSpace;
        'cx-spinner': typeof CxSpinner;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    private readonly configsController;
    dialog: CxDialog;
    grid: CxGrid;
    /**
     * The blocks available for selection.
     * Each block should have a unique `id`, a `displayName`, a `description`, a `representative` image URL, and a `disabled` state.
     * The `representative` image is displayed in the card.
     * The `disabled` state indicates whether the block is selectable or not.
     */
    blocks: Array<{
        description: string;
        disabled: boolean;
        displayName: string;
        id: string;
        name: string;
        representative: string;
    }>;
    /**
     * The templates available for selection.
     * Each template should have a unique `id`, a `name`, a `description`, a `representative` image URL, and a `type`.
     * The `representative` image is displayed in the card.
     */
    templates: Array<{
        description: string;
        id: string;
        name: string;
        representative: string;
        type: string;
    }>;
    /**
     * Indicates whether the block picker is currently loading.
     * When set to `true`, a spinner is displayed over the block picker.
     */
    loading: boolean;
    /**
     * The current block type being selected.
     * This is used to determine which block type is currently being configured.
     * It is set when the user selects a block type from the picker.
     * It is also used to determine if the user is selecting a template for that block type.
     * The value should match the `id` of one of the blocks in the `blocks` array.
     * If the user is selecting a template, this value will be set to the block type (event.g., 'TextBlock', 'ImageBlock').
     * If the user is not selecting a template, this value will be an empty string.
     */
    currentBlockType: BlockType | undefined;
    /**
     * Indicates whether the user is currently selecting a template for the current block type.
     * When set to `true`, the block picker will display the templates available for the current block type.
     * When set to `false`, the block picker will display the available blocks.
     */
    selectingTemplate: boolean;
    canCreateTemplate: boolean;
    amount: number;
    forceSelectingTemplate: boolean;
    limitedBlocks: string[];
    addIndex: number | undefined;
    /**
     * Whether to expose asset format / transformation / download-format /
     * video-format-picker controls for image, video, gallery, carousel,
     * and timeline blocks. Forwarded from `cx-content-builder`.
     * @default false
     */
    enableAssetFormatControls: boolean;
    selectedComponent: Component | undefined;
    /**
     * The boundary property of the confirm popover's dropdown/dialog popup.
     */
    boundary: HTMLElement;
    private maxColumns;
    private readonly cardWidth;
    show(): void;
    hide(): void;
    private handleDialogResize;
    get itemCount(): number;
    get columns(): number;
    get blockName(): string;
    private resetState;
    private handleBlockSelect;
    private handleTemplateSelect;
    private handleCustomBlockSelect;
    private handleClose;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-block-picker': CxBlockPicker;
    }
    interface GlobalEventHandlersEventMap {
        'cx-content-builder-block-select': CxContentBuilderBlockSelectEvent;
        'cx-content-builder-template-select': CxContentBuilderTemplateSelectEvent;
    }
}
