import GraphEditor from '@web/src/components/common/editor/graph/GraphEditor';
import MindMapEditor from '@web/src/components/presentation/mind-map';
import React, { useState, useCallback } from 'react';
import * as tus from 'tus-js-client';
interface TusUploadProps {
    onSuccess?: (response: any) => void;
    onError?: (error: Error) => void;
}
const TusUploader: React.FC<TusUploadProps> = ({
    onSuccess,
    onError
}) => {
    const [progress, setProgress] = useState<number>(0);
    const [isUploading, setIsUploading] = useState<boolean>(false);
    const [uploadError, setUploadError] = useState<string | null>(null);
    const handleFileUpload = useCallback((file: File) => {
        if (!file) return;
        setIsUploading(true);
        setProgress(0);
        setUploadError(null);
        // Extract file extension
        const extension = file.name.split('.').pop() || '';
        const upload = new tus.Upload(file, {
            endpoint: "http://localhost:3000/upload",
            retryDelays: [0, 1000, 3000, 5000],
            metadata: {
                filename: file.name,
                size: file.size.toString(),
                mimeType: file.type,
                extension: extension,
                modifiedAt: new Date(file.lastModified).toISOString(),
            },
            onProgress: (bytesUploaded, bytesTotal) => {
                const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
                setProgress(Number(percentage));
            },
            onSuccess: () => {
                setIsUploading(false);
                setProgress(100);
                onSuccess && onSuccess(upload);
            },
            onError: (error) => {
                setIsUploading(false);
                setUploadError(error.message);
                onError && onError(error);
            }
        });

        upload.start();
    }, [onSuccess, onError]);

    return (
        <div>
            <div className='w-full' style={{ height: 800 }}>
                <GraphEditor></GraphEditor>
            </div>
            {/* <div className=' h-screen'>
                <MindMap></MindMap>
            </div> */}
            {/* <MindMapEditor></MindMapEditor> */}

            <input
                type="file"
                onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (file) handleFileUpload(file);
                }}
            />
            {isUploading && (
                <div>
                    <progress value={progress} max="100" />
                    <span>{progress}%</span>
                </div>
            )}
            {uploadError && (
                <div style={{ color: 'red' }}>
                    上传错误: {uploadError}
                </div>
            )}
        </div>
    );
};

export default TusUploader;