import React, { useState, useEffect, useCallback } from 'react';
import { Package, DownloadCloud, CheckCircle2, FolderArchive, Loader2, Download, Copy } from 'lucide-react';
import { getBackupDownloadZipPath, createBackupZip } from '../util/lib';
import { useToast } from './Toast';
/**
* DownloadBackup component
* @param {Object} props
* @param {Object} props.backup - The backup item
* @param {Function} [props.onDownload] - Called when download is requested
* @param {Function} [props.onCreateZip] - Called when create zip is requested
*/
const DownloadBackup = ({ backup }) => {
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const [isCreatingZip, setIsCreatingZip] = useState(false);
const [backupDownloadZipPath, setBackupDownloadZipPath] = useState(null);
const handleDownload = async () => {
setIsLoading(true);
const backup_download_zip_path = await getBackupDownloadZipPath(backup.folder_name);
// validate
if(backup_download_zip_path.success != true) {
toast({ message: backup_download_zip_path.data, type: 'error' });
return;
}
setBackupDownloadZipPath(backup_download_zip_path.data);
setIsLoading(false);
};
const copyToClipboard = (text) => {
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
navigator.clipboard.writeText(text).then(() => {
console.log('Copied to clipboard!');
}).catch(err => {
console.error('Failed to copy: ', err);
});
} else {
// Fallback cho trình duyệt cũ
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // tránh cuộn trang
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
document.execCommand('copy');
console.log('Copied with fallback!');
} catch (err) {
console.error('Fallback failed: ', err);
}
document.body.removeChild(textarea);
}
}
const onHandleCopyLink = useCallback(() => {
copyToClipboard(backupDownloadZipPath);
toast({ message: 'Link copied to clipboard', type: 'success' });
}, [backupDownloadZipPath]);
useEffect(() => {
handleDownload();
}, []);
const handleCreateZip = async () => {
setIsCreatingZip(true);
const backup_create_zip = await createBackupZip(backup.folder_name);
console.log(backup_create_zip);
// validate
if(backup_create_zip.success != true) {
toast({ message: backup_create_zip.data, type: 'error' });
return;
}
setBackupDownloadZipPath(backup_create_zip.data);
setIsCreatingZip(false);
};
if(isLoading) {
return (
);
}
if(backupDownloadZipPath == false) {
return (
<>
Backups are created on-demand to save storage 💾. Click below to generate one when needed, and don’t forget to delete it once you’re finished — keep things clean and efficient. 🧹✨
{isCreatingZip ? (
<>
);
}
return (
<>
Backup Ready for Download
Your backup zip file has been created successfully. Click the download button below to save it to your computer.
window.open(backupDownloadZipPath, '_blank')}
className="tw-inline-flex tw-items-center tw-px-4 tw-py-2 tw-bg-green-600 tw-text-white tw-text-sm tw-font-medium tw-rounded-md tw-shadow-sm hover:tw-bg-green-700 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-green-500 focus:tw-ring-offset-2 tw-transition-colors"
>
);
};
export default DownloadBackup;