import React, { memo, useMemo, useEffect } from 'react';

import { Container } from './VideoTimeLineEditor';
import VideoEditingTimeline, { ReactVideoEditingTimelineProps } from 'video-editing-timeline-react';

interface IVideoTimeLineEditorProps {

}

const VideoTimeLineEditor: React.FC<IVideoTimeLineEditorProps> = (props: IVideoTimeLineEditorProps) => {

    const generationConfig: ReactVideoEditingTimelineProps = useMemo(() => {
        return {
            config: {
                el: '#timeline',
                canvasWidth: 5000,
                canvasHeight: 50,
                minimumScale: 10, // 一个小刻度长度(单位px)
                minimumScaleTime: 1, // 一个小刻度代表时间（单位秒）
            },
        };
    }, []);

    useEffect(() => {
        const videoEditingTimeline = new VideoEditingTimeline(generationConfig);
    }, [generationConfig]);

    return (
        <Container>
            <canvas id="timeline"/>
        </Container>
    );
};

export default memo(VideoTimeLineEditor);