import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxButtonGroup } from '../../../atoms/src/components/button-group/button-group.ts';
import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxRange } from '../../../atoms/src/components/range/range.ts';
import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { CxTimeUpdateEvent } from '../../../events/src/events.ts';
import { ModifiedType, Ratio, SubClip, Transition } from '../../../types/src/video-editor';
import { CSSResultGroup, TemplateResult } from 'lit';
import { default as CxVideoEditorTimeline } from './components/video-editor-timeline/video-editor-timeline';
import { default as CxVideoEditorToolbar, VideoEditorToolbarActions } from './components/video-editor-toolbar/video-editor-toolbar';
import { default as CxVideoEditorTracks } from './components/video-editor-tracks/video-editor-tracks';

export type CxVideoEditorAction = CustomEvent<{
    action: VideoEditorToolbarActions;
    type?: ModifiedType;
    value?: any;
}>;
export type CxVideoEditorTrackChange = CustomEvent<{
    track: Pick<SubClip, 'crop' | 'id' | 'rotation' | 'startPosition' | 'stopPosition'>;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'cx-video-editor-action': CxVideoEditorAction;
        'cx-video-editor-track-change': CxVideoEditorTrackChange;
    }
}
/**
 * @summary Video editor component.
 *
 * @event {{ time: number }} cx-time-update - Fired when the user seeks to a new time in the video.
 * @event {{ action: VideoEditorToolbarActions }} cx-video-editor-action - Fired when a toolbar action is triggered.
 * @event {{ ids: string[] }} cx-video-editor-tracks-select - Fired when tracks are selected.
 * @event {{ ids: string[] }} cx-video-editor-tracks-transitions-select - Fired when a transition is selected.
 *
 * @typedef VideoEditorToolbarActions - {'crop' | 'delete' | 'export' | 'redo' | 'rotate' | 'save' | 'transition' | 'trim' | 'undo'}
 */
export default class CxVideoEditor extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-button-group': typeof CxButtonGroup;
        'cx-divider': typeof CxDivider;
        'cx-icon-button': typeof CxIconButton;
        'cx-range': typeof CxRange;
        'cx-space': typeof CxSpace;
        'cx-tooltip': typeof CxTooltip;
        'cx-typography': typeof CxTypography;
        'cx-video-editor-timeline': typeof CxVideoEditorTimeline;
        'cx-video-editor-toolbar': typeof CxVideoEditorToolbar;
        'cx-video-editor-tracks': typeof CxVideoEditorTracks;
    };
    data: {
        subClips: Array<Partial<SubClip>>;
        transitions: Transition[];
    };
    ratios: Ratio[];
    activeRatioLabel: string;
    videoContext: any;
    canUndo: boolean;
    canRedo: boolean;
    canCancelAll: boolean;
    /**
     * Indicates whether or not the export button should be shown.
     */
    showExport: boolean;
    scale: number;
    dirty: boolean;
    cropMode: boolean;
    cropActive: boolean;
    activeTracks: string[];
    activeTransitions: string[];
    currentTime: number;
    get videoDuration(): number;
    get disabledControls(): Partial<Record<VideoEditorToolbarActions, boolean>>;
    constructor();
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    private handleKeyDown;
    private handleDelete;
    private moveSelectedTracksToRight;
    private moveSelectedTracksToLeft;
    private handleVideoEditorToolbarAction;
    private handleVideoEditorTracksSelect;
    private handleVideoEditorTracksTransitionSelect;
    private handleVideoEditorTimelineScaleChange;
    private handleScaleChange;
    onTimeUpdate(event: CxTimeUpdateEvent): void;
    updateCropActive(): Promise<void>;
    private handleZoomOutClick;
    private handleZoomInClick;
    private tooltipFormatter;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-video-editor': CxVideoEditor;
    }
}
