import { memo, useState } from 'react';

import Backdrop from '@material-hu/mui/Backdrop';
import Stack from '@material-hu/mui/Stack';

import Image from '@material-hu/components/composed-components/Image';

export const QuestionImage = memo(({ pictureUrl }: { pictureUrl: string }) => {
  const [showImagePreview, setShowImagePreview] = useState(false);

  if (!pictureUrl) return null;

  return (
    <>
      <Stack
        onClick={e => {
          e.stopPropagation();
          setShowImagePreview(true);
        }}
      >
        <Image
          sx={{
            maxWidth: 200,
            borderRadius: 1,
            '&:hover': {
              transition: 'transform 0.1s ease-in-out',
              transform: 'scale(1.05)',
            },
          }}
          aspectRatio="3/2"
          src={pictureUrl}
        />
      </Stack>
      <Backdrop
        open={showImagePreview}
        onClick={e => {
          e.stopPropagation();
          setShowImagePreview(false);
        }}
        sx={{ zIndex: theme => theme.zIndex.modal }}
      >
        <Image
          sx={{
            maxWidth: '60vw',
            maxHeight: '70vh',
            objectPosition: 'center',
            aspectRatio: 'unset',
            borderRadius: 2,
          }}
          src={pictureUrl}
        />
      </Backdrop>
    </>
  );
});

QuestionImage.displayName = 'QuestionImage';
