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 CxResizeObserver } from '../../../../../atoms/src/components/resize-observer/resize-observer.ts';
import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
import { CanvasData, FrameCache, SubClip, Transition } from '../../../../../types/src/video-editor';
import { CSSResultGroup, TemplateResult } from 'lit';
import { default as Sortable } from 'sortablejs';
import { default as CxVideoEditorTrack } from '../video-editor-track/video-editor-track';
import { default as CxVideoEditorTransition } from '../video-editor-transition/video-editor-transition';

export type CxVideoEditorTracksSelectEvent = CustomEvent<{
    ids: string[];
}>;
export type CxVideoEditorTracksTransitionSelectEvent = CustomEvent<{
    ids: string[];
}>;
export type CxVideoEditorTracksReorderEvent = CustomEvent<{
    subClips: Array<Partial<SubClip>>;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'cx-video-editor-tracks-reorder': CxVideoEditorTracksReorderEvent;
        'cx-video-editor-tracks-select': CxVideoEditorTracksSelectEvent;
        'cx-video-editor-tracks-transitions-select': CxVideoEditorTracksTransitionSelectEvent;
    }
}
export default class CxVideoEditorTracks extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-icon': typeof CxIcon;
        'cx-popup': typeof CxPopup;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-video-editor-track': typeof CxVideoEditorTrack;
        'cx-video-editor-transition': typeof CxVideoEditorTransition;
    };
    container: HTMLDivElement;
    scrollable: HTMLDivElement;
    list: HTMLDivElement;
    tracks: SubClip[];
    transitions: Transition[];
    activeTracks: string[];
    activeTransitions: string[];
    currentTime: number;
    videoDuration: number;
    scaleFactor: number;
    maxScaleFactor: number;
    hideBoundary: CxPopup['hideBoundary'];
    scale: number;
    maxScaleMap: Map<string, number>;
    maxDurationMap: Map<string, number>;
    sortable: Sortable | null;
    previous: Array<ChildNode | null>;
    isDragging: boolean;
    /**
     * Cache of frames, keyed by video url
     */
    cache: FrameCache;
    canvasSrcCache: Record<string, string>;
    canvasDataCache: Record<string, CanvasData>;
    constructor();
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    private initSortable;
    private initCanvas;
    private handleTrackSelect;
    private handleTransitionSelect;
    handleStart(evt: Sortable.SortableEvent): void;
    handleEnd(evt: Sortable.SortableEvent): Promise<void>;
    handleTracksChange(): Promise<void>;
    handleScaleFactorChange(): Promise<void>;
    handleCurrentTimeChange(): void;
    private updateCanvasSrcCache;
    private handleTrackCanvasReady;
    private renderTrack;
    private getTrackKey;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-video-editor-tracks': CxVideoEditorTracks;
    }
}
