import React from 'react';
import ImageZoom from 'react-native-image-pan-zoom';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {windowDimensions} from '@shared/constants';

import {Image} from '../Image';
import {
  ImageModalContainer,
  ImageModalContainerProps,
} from '../ImageModalContainer';
import {HEADER_HEIGHT, ROUNDED_HEIGHT, ROUNDED_WIDTH, styles} from './styles';

export interface ImageModalProps
  extends Omit<ImageModalContainerProps, 'children'> {
  rounded?: boolean;
  showZoom: boolean;
  withAuthHeader?: boolean;
  showOptionsMenu?: boolean;
}

export function ImageModal({
  onClose,
  rounded,
  source,
  withAuthHeader,
  showOptionsMenu = true,
  ...props
}: ImageModalProps) {
  const {top, bottom} = useSafeAreaInsets();
  const availableHeight =
    windowDimensions.height - top - bottom - HEADER_HEIGHT;
  const imageHeight = rounded ? ROUNDED_HEIGHT : availableHeight;

  return (
    <ImageModalContainer
      showOptionsMenu={showOptionsMenu}
      source={source}
      onClose={onClose}
      {...props}>
      <ImageZoom
        enableSwipeDown
        pinchToZoom
        useNativeDriver
        cropWidth={windowDimensions.width}
        cropHeight={availableHeight}
        enableDoubleClickZoom={false}
        imageWidth={rounded ? ROUNDED_WIDTH : windowDimensions.width}
        imageHeight={imageHeight}
        onSwipeDown={onClose}
        style={styles.imageZoom}>
        <Image
          contentFit={rounded ? 'cover' : 'contain'}
          withAuthHeader={withAuthHeader}
          source={source}
          style={[styles.image, rounded && styles.imageRound]}
        />
      </ImageZoom>
    </ImageModalContainer>
  );
}
