import React, {memo, useCallback, useState} from 'react';
import {ImageSourcePropType, ImageURISource} from 'react-native';
import {
  CustomImage,
  ImageProps,
} from '@components/Image/components/CustomImage';
import {ImageModal} from '@components/Image/components/ImageModal';
import {CarouselImageModal} from '@components/Image/components/CarouselImageModal';
import {ImageUrl} from '@interfaces/generic';

interface Props extends ImageProps {
  rounded?: boolean;
  imageUrls?: ImageUrl[];
}

/**
 * @deprecated Use `_core/Image/ImageWithZoom` instead
 */
function ImageWithZoom({
  source,
  cached,
  rounded,
  onPress,
  imageUrls,
  ...props
}: Props) {
  const [showModal, setShowModal] = useState(false);
  const carouselIndex = imageUrls?.findIndex(
    image => image.url === (source as ImageURISource).uri,
  );

  const handlePress = useCallback(() => {
    setShowModal(true);
    onPress?.();
  }, [onPress]);

  const handleClose = useCallback(() => {
    setShowModal(false);
  }, []);

  return (
    <>
      <CustomImage
        source={source}
        cached={cached}
        onPress={handlePress}
        {...props}
      />
      {imageUrls && imageUrls.length > 1 ? (
        <CarouselImageModal
          imageUrls={imageUrls}
          showZoom={showModal}
          onClose={handleClose}
          rounded={rounded}
          cached={cached}
          index={carouselIndex}
        />
      ) : (
        <ImageModal
          source={source as ImageSourcePropType}
          cached={cached}
          showZoom={showModal}
          onClose={handleClose}
          rounded={rounded}
        />
      )}
    </>
  );
}

const MemorizedImageWithZoom = memo(ImageWithZoom);
export {MemorizedImageWithZoom as ImageWithZoom};
