import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Label,
} from "@/ui";
import { UseDownloader } from "react-use-downloader/dist/types";

export const DownloadDialog = (props: Omit<UseDownloader, "download">) => {
  const { size, elapsed, percentage, cancel, error, isInProgress } = props;

  return (
    <Dialog defaultOpen>
      <DialogContent className='sm:max-w-md'>
        <DialogHeader>
          <DialogTitle>Share link</DialogTitle>
          <DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>
        </DialogHeader>
        <div>
          <p>Download is in {isInProgress ? "in progress" : "stopped"}</p>

          <button onClick={() => cancel()}>Cancel the download</button>
          <p>Download size in bytes {size}</p>
          <Label>Downloading progress:</Label>
          <progress id='file' value={percentage} max='100' />
          <p>Elapsed time in seconds {elapsed}</p>
          {error && <p>possible error {JSON.stringify(error)}</p>}
        </div>
        <DialogFooter className='sm:justify-start'>
          <DialogClose asChild>
            <Button type='button' variant='secondary'>
              Close
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};