import React from 'react';
import {ImageSourcePropType} from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import {Image} from '@components/Image';
import {
  ImageModalContainer,
  ImageModalContainerProps,
} from '@components/Image/components/ImageModalContainer';
import {windowDimensions} from '@shared/constants';
import {SPACING} from '@shared/theme';

import {styles} from './styles';

const ROUNDED_HEIGHT = windowDimensions.height / 2;
const ROUNDED_WIDTH = windowDimensions.width - SPACING.x4;

export interface ImageModalProps
  extends Omit<ImageModalContainerProps, 'children'> {
  source: ImageSourcePropType;
  cached?: boolean;
  showZoom: boolean;
  rounded?: boolean;
}

/**
 * @deprecated Use `_core/Image/ImageModal` instead
 */
export function ImageModal({
  source,
  cached,
  rounded,
  onClose,
  ...props
}: ImageModalProps) {
  return (
    <ImageModalContainer source={source} onClose={onClose} {...props}>
      <ImageZoom
        useNativeDriver
        enableSwipeDown
        pinchToZoom
        enableDoubleClickZoom={false}
        cropWidth={windowDimensions.width}
        cropHeight={windowDimensions.height}
        imageWidth={rounded ? ROUNDED_WIDTH : windowDimensions.width}
        imageHeight={rounded ? ROUNDED_HEIGHT : windowDimensions.height}
        onSwipeDown={onClose}
        style={styles.imageZoom}>
        <Image
          source={source}
          cached={cached}
          style={[styles.image, rounded && styles.imageRound]}
          resizeMode={rounded ? 'cover' : 'contain'}
        />
      </ImageZoom>
    </ImageModalContainer>
  );
}
