import HighlightOff from '@mui/icons-material/HighlightOff';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import React, { FC, useState } from 'react';
import { PhotoPreviewProps } from './types';

const PREVIEW_WIDTH = 72;
const PREVIEW_HEIGHT = 72;
const _noop = () => null;

const DeleteIcon = ({ onClick }: { onClick: () => void }) => (
  <Box
    sx={{
      position: 'absolute',
      top: 0,
      right: 0,
      p: 0.2,
      background: 'white',
      borderRadius: 10,
    }}
  >
    <IconButton sx={{ p: 0 }} color="error" disableRipple onClick={onClick}>
      <HighlightOff />
    </IconButton>
  </Box>
);

const PhotoPreview: FC<PhotoPreviewProps> = ({
  src,
  alt,
  width = PREVIEW_WIDTH,
  height = PREVIEW_HEIGHT,
  enableDelete = true,
  onDeleteImage = _noop,
  onClick = _noop,
  allowView = false,
  queueItem,
}) => {
  const [imageIsLoaded, setImageIsLoaded] = useState(false);

  return (
    <Box
      component="div"
      sx={{
        position: 'relative',
        p: 1,
      }}
    >
      <Box
        sx={{
          backgroundColor: imageIsLoaded ? '' : '#ebebeb',
          width: width,
          height: height,
        }}
      >
        <img
          src={src}
          alt={alt}
          width={width}
          height={height}
          onClick={onClick}
          style={{
            cursor: allowView ? 'zoom-in' : 'not-allowed',
            visibility: imageIsLoaded ? 'visible' : 'hidden',
            opacity: imageIsLoaded ? '1' : '0',
            transition: queueItem ? 'none' : '1.5s ease-in',
          }}
          onLoad={() => setImageIsLoaded(true)}
        />
      </Box>
      {enableDelete && <DeleteIcon onClick={onDeleteImage} />}
    </Box>
  );
};

export default PhotoPreview;