import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import Button from '../../../design-system/Buttons/Button';
import Title from '../../../design-system/Title';
import { Box, Dialog, IconButton, Stack, useTheme } from '@mui/material';
import { alpha } from '@mui/material/styles';
import { IconDownload, IconX } from '@tabler/icons-react';
import { downloadUrl } from '../../../../utils/files';
const ImagePreviewDialog = ({ open, onClose, src, name = '', alt, showDownload = true, onDownload, }) => {
    const { t } = useTranslation();
    const theme = useTheme();
    const invertedColor = theme.palette.new.text.neutral.inverted;
    const handleDownload = (event) => {
        event.stopPropagation();
        if (onDownload) {
            onDownload();
            return;
        }
        if (src) {
            downloadUrl(src, name);
        }
    };
    const stopPropagation = (event) => {
        event.stopPropagation();
    };
    return (_jsxs(Dialog, { open: open, onClose: onClose, fullScreen: true, PaperProps: {
            sx: {
                backgroundColor: ({ palette }) => alpha(palette.new.background.elements.overlay, 0.2),
                backgroundImage: 'none',
                boxShadow: 'none',
                border: 'none',
                borderRadius: 0,
            },
        }, children: [_jsxs(Stack, { onClick: onClose, sx: {
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    p: 2,
                }, children: [_jsx(Box, { onClick: stopPropagation, sx: { flex: 1, minWidth: 0, display: 'flex' }, children: _jsx(Title, { variant: "L", title: name, withEllipsis: true, sx: { flex: 1, minWidth: 0 }, slotProps: {
                                title: { sx: { color: invertedColor } },
                            } }) }), showDownload && (_jsx(Button, { variant: "secondary", size: "small", startIcon: _jsx(IconDownload, { size: 16 }), onClick: handleDownload, children: t('general:download') })), _jsx(IconButton, { variant: "tertiary", "aria-label": t('general:close'), onClick: onClose, sx: {
                            color: invertedColor,
                            svg: { stroke: invertedColor },
                            '&:hover svg': { stroke: invertedColor },
                        }, children: _jsx(IconX, {}) })] }), _jsx(Stack, { onClick: onClose, sx: {
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: theme.spacing(3),
                    overflow: 'auto',
                }, children: src && (_jsx(Box, { component: "img", onClick: stopPropagation, src: src, alt: alt ?? name, sx: {
                        maxWidth: '100%',
                        maxHeight: '100%',
                        objectFit: 'contain',
                        borderRadius: theme.shape.borderRadiusL,
                    } })) })] }));
};
export default ImagePreviewDialog;
