import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import FileIcon from '../../composed-components/files/FileIcon';
import ImagePreviewDialog from '../../composed-components/files/ImagePreviewDialog';
import Avatar from '../Avatar';
import CardContainer from '../CardContainer';
import Title from '../Title';
import { Box, IconButton, LinearProgress, Stack, useTheme, } from '@mui/material';
import { IconAlertTriangle, IconCheck, IconDownload, IconExchange, IconFile, IconTrash, IconX, } from '@tabler/icons-react';
import { bytesToSize } from '../../../utils/bytes';
import { downloadFile, downloadUrl, getFileExtension } from '../../../utils/files';
const FileCard = ({ status, sx, onRemove, onReupload, file, attachment, fileAsset, showDownloadButton = true, showReuploadButton = true, showRemoveButton = true, showRemoveUploadingButton = true, disabled = false, readOnly = false, useFileIcon = false, }) => {
    const theme = useTheme();
    const { t } = useTranslation('material_hu_only');
    let Icon = null;
    let iconColor = 'primary';
    let description = '';
    let descriptionColor = null;
    let showRemove = showRemoveButton;
    let RemoveIcon = IconTrash;
    let ReuploadIcon = null;
    let DownloadIcon = null;
    let cardProps = {};
    const finalFile = file || attachment || fileAsset;
    // Get size string - fileAsset.size is already formatted, file.size needs conversion
    const getSize = () => {
        if (fileAsset)
            return fileAsset.size;
        if (attachment)
            return attachment.size;
        if (file)
            return bytesToSize(file.size);
        return '';
    };
    // Object URL for native File previews; tracked so we can revoke it on cleanup.
    const [nativeFilePreviewUrl, setNativeFilePreviewUrl] = useState(null);
    useEffect(() => {
        if (!useFileIcon || !file || !file.type?.startsWith('image/')) {
            setNativeFilePreviewUrl(null);
            return undefined;
        }
        const url = URL.createObjectURL(file);
        setNativeFilePreviewUrl(url);
        return () => URL.revokeObjectURL(url);
    }, [useFileIcon, file]);
    // Thumbnail for the small FileIcon slot; prefers the lighter `thumbnailUrl`
    // when the asset provides one.
    const getThumbnailUrl = () => {
        if (!useFileIcon)
            return undefined;
        if (fileAsset?.type === 'IMAGE') {
            return fileAsset.thumbnailUrl ?? fileAsset.url;
        }
        if (attachment?.type?.startsWith('image/')) {
            return attachment.url;
        }
        return nativeFilePreviewUrl ?? undefined;
    };
    // Full-resolution source for the preview dialog; always uses the original
    // asset url so the dialog never renders a downscaled thumbnail.
    const getFullPreviewUrl = () => {
        if (!useFileIcon)
            return undefined;
        if (fileAsset?.type === 'IMAGE') {
            return fileAsset.url;
        }
        if (attachment?.type?.startsWith('image/')) {
            return attachment.url;
        }
        return nativeFilePreviewUrl ?? undefined;
    };
    const thumbnailUrl = getThumbnailUrl();
    const fullPreviewUrl = getFullPreviewUrl();
    const canPreviewImage = Boolean(fullPreviewUrl) && !disabled;
    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
    // Force the dialog closed if the card stops being previewable while it is
    // open, so it doesn't auto-reopen when previewability comes back.
    useEffect(() => {
        if (!canPreviewImage && isPreviewOpen) {
            setIsPreviewOpen(false);
        }
    }, [canPreviewImage, isPreviewOpen]);
    const handleOpenPreview = () => setIsPreviewOpen(true);
    const handleClosePreview = () => setIsPreviewOpen(false);
    // Keyboard activation for the inline preview trigger so the filename behaves
    // like a button (Enter / Space) for non-pointer users.
    const handlePreviewKeyDown = (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            handleOpenPreview();
        }
    };
    const handleDownloadFromPreview = () => {
        if (file) {
            downloadFile(file);
            return;
        }
        const asset = attachment || fileAsset;
        if (asset?.url) {
            downloadUrl(asset.url, asset.name);
        }
    };
    switch (status) {
        case 'default':
            Icon = IconFile;
            description = `${getSize()} • ${(getFileExtension(finalFile?.name ?? '') ?? '').toUpperCase()}`;
            DownloadIcon = IconDownload;
            break;
        case 'success':
            Icon = IconCheck;
            description = `${getSize()} • ${(getFileExtension(finalFile?.name ?? '') ?? '').toUpperCase()}`;
            DownloadIcon = IconDownload;
            break;
        case 'uploading':
            Icon = IconFile;
            description = `${getSize()} • ${t('hu_file_card.loading')}...`;
            RemoveIcon = IconX;
            showRemove = showRemoveUploadingButton;
            break;
        case 'error':
            Icon = IconAlertTriangle;
            ReuploadIcon = IconExchange;
            iconColor = 'error';
            cardProps = {
                backgroundColor: theme.palette.new.background.feedback.error,
                borderColor: theme.palette.new.border.states.error,
            };
            description = t('hu_file_card.loading_error');
            descriptionColor = theme.palette.new.text.feedback.error;
            break;
    }
    return (_jsxs(CardContainer, { sx: { ...cardProps, ...sx }, children: [_jsxs(Stack, { sx: {
                    flexDirection: 'row',
                    gap: 1,
                }, children: [useFileIcon ? (_jsx(FileIcon, { size: "medium", file: {
                            extension: getFileExtension(finalFile?.name ?? ''),
                        }, src: thumbnailUrl, alt: finalFile?.name })) : (_jsx(Avatar, { color: iconColor, size: "medium", Icon: Icon })), _jsx(Title, { variant: "S", title: _jsx(Box, { component: "span", title: finalFile.name, role: canPreviewImage ? 'button' : undefined, tabIndex: canPreviewImage ? 0 : undefined, onClick: canPreviewImage ? handleOpenPreview : undefined, onKeyDown: canPreviewImage ? handlePreviewKeyDown : undefined, sx: canPreviewImage
                                ? {
                                    cursor: 'pointer',
                                    '&:hover': { textDecoration: 'underline' },
                                    '&:focus-visible': {
                                        outline: `2px solid ${theme.palette.primary.main}`,
                                        outlineOffset: 2,
                                        borderRadius: 1,
                                    },
                                }
                                : undefined, children: finalFile.name }), description: description, withEllipsis: true, sx: {
                            flex: 1,
                            minWidth: 0,
                            wordBreak: 'break-all',
                            '.MuiTypography-globalXS': {
                                color: descriptionColor,
                            },
                        } }), ReuploadIcon && onReupload && showReuploadButton && (_jsx(IconButton, { onClick: onReupload, disabled: disabled, children: _jsx(ReuploadIcon, { size: 24 }) })), DownloadIcon && showDownloadButton && (_jsx(IconButton, { onClick: () => {
                            if (file) {
                                downloadFile(file);
                            }
                            else {
                                const asset = attachment || fileAsset;
                                downloadUrl(asset.url, asset.name);
                            }
                        }, disabled: disabled, children: _jsx(DownloadIcon, { size: 24 }) })), onRemove && showRemove && !readOnly && (_jsx(IconButton, { onClick: onRemove, disabled: disabled, children: _jsx(RemoveIcon, { size: 24 }) }))] }), status === 'uploading' && (_jsx(LinearProgress, { sx: { mt: 2, borderRadius: 1 }, variant: "indeterminate" })), canPreviewImage && (_jsx(ImagePreviewDialog, { open: isPreviewOpen, onClose: handleClosePreview, src: fullPreviewUrl, name: finalFile?.name, showDownload: showDownloadButton, onDownload: handleDownloadFromPreview }))] }));
};
export default FileCard;
