import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from '../../../../../scalars/lib/utils.js';
import { ProgressBar } from '../../../../../scalars/components/fragments/progress-bar/index.js';
import { Icon } from '../../../icon/index.js';
import { FormMessageList } from '../../../../../scalars/components/fragments/form-message/message-list.js';
import { getContainerDimensions, getIconKey, MESSAGES } from '../utils.js';
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, } from '../../../confirm/alert-dialog.js';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import PreviewFile from './preview-file.js';
import PreviewImage from './preview-image.js';
import PreviewAudio from './preview-audio.js';
import PreviewVideo from './preview-video.js';
import { PlaceHolderUnsupported } from './placeholder-unsupported.js';
import { PlaceHolderLoading } from './placeholder-loading.js';
import { PlaceHolderCorrupted } from './placeholder-corrupted.js';
const FileUploadItem = ({ fileName = '', fileSize = '', progress = undefined, onCancel, onReload, className, mimeType = '', errorsUpload, status = 'idle', 
// Preview Props
showPreview, preview, isPreviewOpen, handleOnPreview, handleOnCancelPreview = () => null, previewStatus, typePreview, }) => {
    const showProgress = status === 'uploading' && progress !== undefined && progress >= 0 && progress < 100;
    const showSuccess = status === 'success';
    const showError = status === 'error';
    const showErrorsUpload = Array.isArray(errorsUpload) && errorsUpload.length > 0;
    const handleOnCancel = (e) => {
        e.stopPropagation();
        onCancel?.(e);
    };
    const handleOnReload = (e) => {
        e.stopPropagation();
        onReload?.(e);
    };
    const commonPreviewProps = {
        className: 'w-full h-full',
        status: previewStatus,
        onClose: handleOnCancelPreview,
        preview,
    };
    return (_jsxs("div", { className: cn('bg-white rounded-md shadow-[0px_2px_12px_0px_rgba(37,42,52,0.10)] w-full', 'pt-2 px-2 pb-1', 'border-gray-100', className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex flex-1 gap-2 ", children: [_jsx(Icon, { name: getIconKey(mimeType), size: 36 }), _jsxs("div", { className: "flex w-23 flex-col", children: [_jsx("span", { className: cn('text-gray-900 text-xs font-medium leading-4.5', 'truncate'), children: fileName }), _jsx("span", { className: "text-gray-500 text-xs leading-4.5 font-medium", children: fileSize })] })] }), _jsx("div", { className: "flex flex-col items-center gap-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [showProgress && _jsxs("span", { className: "text-gray-600 font-medium text-xs", children: [Math.round(progress), "%"] }), status === 'error' && (_jsx("button", { type: "button", onClick: handleOnReload, className: "text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Reload upload", children: _jsx(Icon, { name: "Reload", size: 16, className: "text-gray-900" }) })), _jsx("button", { type: "button", onClick: handleOnCancel, className: "text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Cancel Upload", children: _jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] }) })] }), _jsxs("div", { className: "flex flex-col mt-0.5 h-4.5", children: [showProgress && (_jsx(ProgressBar, { value: progress, className: "h-2 bg-gray-100 [&_[data-slot=progress-bar-indicator]]:bg-blue-600" })), _jsxs("div", { className: "flex flex-row justify-between", role: "status", "aria-live": "polite", "aria-atomic": "true", children: [showSuccess && _jsx("span", { className: "text-green-700 text-xs leading-4.5 font-normal", children: MESSAGES.success }), showSuccess && showPreview && (_jsx("button", { type: "button", onClick: handleOnPreview, className: "text-blue-900 text-xs leading-4.5 font-normal", "aria-label": "Open preview", children: MESSAGES.preview }))] }), showError && (_jsx("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: _jsx("span", { className: "text-red-900 text-xs leading-4.5 font-normal", children: MESSAGES.error }) }))] }), showPreview && (_jsxs(AlertDialog, { open: isPreviewOpen, children: [_jsx(VisuallyHidden, { children: _jsx(AlertDialogTitle, { children: "Preview" }) }), _jsx(VisuallyHidden, { children: _jsx(AlertDialogDescription, { children: "Preview of the file" }) }), _jsxs(AlertDialogContent, { className: cn('p-0 border-0 shadow-none bg-transparent max-w-none', getContainerDimensions(previewStatus, typePreview)), children: [previewStatus === 'loading' && (_jsx(PlaceHolderLoading, { onClose: handleOnCancelPreview, typePreview: typePreview ?? 'pdf' })), previewStatus === 'corrupted_file' && (_jsx(PlaceHolderCorrupted, { onClose: handleOnCancelPreview, typePreview: typePreview ?? 'pdf' })), previewStatus === 'unsupported_file' && _jsx(PlaceHolderUnsupported, { onClose: handleOnCancelPreview }), previewStatus === 'success' && (_jsxs(_Fragment, { children: [typePreview === 'pdf' && _jsx(PreviewFile, { ...commonPreviewProps }), typePreview === 'image' && _jsx(PreviewImage, { ...commonPreviewProps }), typePreview === 'audio' && _jsx(PreviewAudio, { ...commonPreviewProps }), typePreview === 'video' && _jsx(PreviewVideo, { ...commonPreviewProps })] }))] })] })), showErrorsUpload && _jsx(FormMessageList, { messages: errorsUpload, type: "error", className: "gap-0.5" })] }));
};
FileUploadItem.displayName = 'FileUploadItem';
export { FileUploadItem };
//# sourceMappingURL=file-upload-item.js.map