import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';
import { Textarea } from '@/components/ui/textarea';
import { useState } from 'react';

const VideoDownloadModal = ({ isOpen, onClose, ffmpegCommand, handleDownloadButton, isExporting, exportProgress, exportStatus }) => {
    const [showDebug, setShowDebug] = useState(false);

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Download Video</DialogTitle>
                    {exportStatus ||
                        (exportProgress > 0 && (
                            <DialogDescription>
                                <div className="flex items-center justify-center">
                                    <div className="flex items-center space-x-2">
                                        <span className="text-sm font-medium">{exportStatus}</span>
                                        <span className="text-xs font-medium">{exportProgress}%</span>
                                    </div>
                                    <Spinner className={'h-5 w-5'} />
                                </div>
                            </DialogDescription>
                        ))}
                </DialogHeader>

                <div className="mb-4 flex items-center space-x-2">
                    <Checkbox id="show-debug" checked={showDebug} onCheckedChange={setShowDebug} />
                    <label
                        htmlFor="show-debug"
                        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                        Debug FFMPEG command
                    </label>
                </div>

                {showDebug && <Textarea value={ffmpegCommand} readOnly className="mb-4" />}

                <Button onClick={handleDownloadButton}>{isExporting ? <Spinner className="text-secondary h-4 w-4" /> : 'Download'}</Button>

                {/* Add your content here */}
            </DialogContent>
        </Dialog>
    );
};

export default VideoDownloadModal;