// Use minimal react-konva core to avoid Node.js dependencies
import 'konva/lib/Animation';
import 'konva/lib/shapes/Image';
import 'konva/lib/shapes/Text';
import { Image, Layer, Stage, Text } from 'react-konva/lib/ReactKonvaCore';

const VideoPreview = ({
    // Dimensions
    dimensions,

    // Timeline state
    currentTime,
    totalDuration,
    isPlaying,
    status,

    // Export state
    isExporting,
    exportProgress,
    exportStatus,

    // Data
    timelineElements,
    activeElements,
    videoElements,
    loadedVideos,
    videoStates,
    ffmpegCommand,

    // Event handlers
    handlePlay,
    handlePause,
    handleReset,
    handleSeek,
    copyFFmpegCommand,
    exportVideo,

    // Refs
    layerRef,
}) => {
    return (
        <div>
            <Stage width={dimensions.width} height={dimensions.height} className="">
                <Layer ref={layerRef}>
                    {activeElements.map((element) => {
                        if (element.type === 'video' && videoElements[element.id]) {
                            return (
                                <Image
                                    key={element.id}
                                    image={videoElements[element.id]}
                                    x={element.x}
                                    y={element.y}
                                    width={element.width}
                                    height={element.height}
                                    draggable
                                />
                            );
                        } else if (element.type === 'text') {
                            return (
                                <Text
                                    key={element.id}
                                    text={element.text}
                                    x={element.x}
                                    y={element.y}
                                    fontSize={element.fontSize}
                                    fill={element.fill}
                                    stroke={element.stroke}
                                    strokeWidth={element.strokeWidth}
                                    draggable
                                />
                            );
                        } else if (element.type === 'image' && element.imageElement) {
                            return (
                                <Image
                                    key={element.id}
                                    image={element.imageElement}
                                    x={element.x}
                                    y={element.y}
                                    width={element.width}
                                    height={element.height}
                                    draggable
                                />
                            );
                        }
                        return null;
                    })}
                </Layer>
            </Stage>
        </div>
    );
};

export default VideoPreview;