import { type MouseEvent } from 'react';
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';

import { type ImagePreviewDialogProps } from './types';

const ImagePreviewDialog = ({
  open,
  onClose,
  src,
  name = '',
  alt,
  showDownload = true,
  onDownload,
}: ImagePreviewDialogProps) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const invertedColor = theme.palette.new.text.neutral.inverted;

  const handleDownload = (event: MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    if (onDownload) {
      onDownload();
      return;
    }
    if (src) {
      downloadUrl(src, name);
    }
  };

  const stopPropagation = (event: MouseEvent<HTMLElement>) => {
    event.stopPropagation();
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullScreen
      PaperProps={{
        sx: {
          backgroundColor: ({ palette }) =>
            alpha(palette.new.background.elements.overlay, 0.2),
          backgroundImage: 'none',
          boxShadow: 'none',
          border: 'none',
          borderRadius: 0,
        },
      }}
    >
      <Stack
        onClick={onClose}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          p: 2,
        }}
      >
        <Box
          onClick={stopPropagation}
          sx={{ flex: 1, minWidth: 0, display: 'flex' }}
        >
          <Title
            variant="L"
            title={name}
            withEllipsis
            sx={{ flex: 1, minWidth: 0 }}
            slotProps={{
              title: { sx: { color: invertedColor } },
            }}
          />
        </Box>
        {showDownload && (
          <Button
            variant="secondary"
            size="small"
            startIcon={<IconDownload size={16} />}
            onClick={handleDownload}
          >
            {t('general:download')}
          </Button>
        )}
        <IconButton
          variant="tertiary"
          aria-label={t('general:close')}
          onClick={onClose}
          sx={{
            color: invertedColor,
            svg: { stroke: invertedColor },
            '&:hover svg': { stroke: invertedColor },
          }}
        >
          <IconX />
        </IconButton>
      </Stack>
      <Stack
        onClick={onClose}
        sx={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          padding: theme.spacing(3),
          overflow: 'auto',
        }}
      >
        {src && (
          <Box
            component="img"
            onClick={stopPropagation}
            src={src}
            alt={alt ?? name}
            sx={{
              maxWidth: '100%',
              maxHeight: '100%',
              objectFit: 'contain',
              borderRadius: theme.shape.borderRadiusL,
            }}
          />
        )}
      </Stack>
    </Dialog>
  );
};

export type { ImagePreviewDialogProps };

export default ImagePreviewDialog;
