import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { SubmissionUploadPanel } from "@/components/submission-upload-panel"

type UploadCommandDialogProps = {
  open: boolean
  onOpenChange: (open: boolean) => void
  submissionId?: string
  presignedUrl: string
}

export function UploadCommandDialog({
  open,
  onOpenChange,
  submissionId,
  presignedUrl,
}: UploadCommandDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden gap-0 p-0 sm:max-w-4xl">
        <DialogHeader className="px-6 pt-6 pr-12">
          <DialogTitle>Upload Docker Image Tar</DialogTitle>
          <DialogDescription>
            Finish a submission that is waiting for image upload with either
            the original shell command or the browser uploader.
          </DialogDescription>
        </DialogHeader>
        <div className="overflow-y-auto px-6 pb-6">
          <SubmissionUploadPanel
            submissionId={submissionId}
            presignedUrl={presignedUrl}
          />
        </div>
      </DialogContent>
    </Dialog>
  )
}