import { type Dispatch, type FC, type SetStateAction } from 'react';

import Box from '@material-hu/mui/Box';
import { type SxProps } from '@material-hu/mui/styles';

import { type BunnyImageClass } from 'src/pages/dashboard/Conversations/constants';
import { type AttachmentLoadError } from 'src/pages/dashboard/Conversations/types';

import LazySecureImage from './LazySecureImage';

type LazySecureAwareImageProps = {
  conversationId?: string;
  isSecure: boolean;
  url: string;
  alt?: string;
  sxSecure: SxProps;
  sxDefault: SxProps;
  onUpdateAttachmentLoadError?: Dispatch<SetStateAction<AttachmentLoadError>>;
  isDownloadable?: boolean;
  imageClass?: BunnyImageClass;
};

const LazySecureAwareImage: FC<LazySecureAwareImageProps> = props => {
  const {
    conversationId,
    isSecure,
    url,
    alt,
    sxSecure,
    sxDefault,
    onUpdateAttachmentLoadError,
    isDownloadable = false,
    imageClass,
  } = props;

  if (!isSecure) {
    return (
      <LazySecureImage
        sx={sxSecure}
        alt={alt}
        url={url}
        conversationId={conversationId}
        onUpdateAttachmentLoadError={onUpdateAttachmentLoadError}
        isDownloadable={isDownloadable}
        imageClass={imageClass}
      />
    );
  }

  return (
    <Box
      component="img"
      loading="lazy"
      src={url}
      alt="preview"
      sx={sxDefault}
    />
  );
};

export default LazySecureAwareImage;