import type {ComponentProps, FunctionComponent} from 'react'
import {useState} from 'react'
import type {TapGesture} from 'react-native-gesture-handler'
import {Image, Modal, useWindowDimensions, View} from 'react-native'
import {useTheme} from '@react-navigation/core'

interface ZoomedImageViewProps extends ComponentProps<typeof Image> {
  gesture?: TapGesture
}

const ZoomedImageView: FunctionComponent<ZoomedImageViewProps> = ({gesture, ...imageProps}) => {
  const dimensions = useWindowDimensions()
  const theme = useTheme()

  return (
    <Modal>
      <View style={[{backgroundColor: theme.colors.card}]}>
        <Image {...imageProps} style={[imageProps.style, {width: dimensions.width, height: dimensions.height}]} />
      </View>
    </Modal>
  )
}

type ImageWithGestureProps = ComponentProps<typeof Image>

const ImageWithGestures: FunctionComponent<ImageWithGestureProps> = ({...imageProps}) => {
  const [isZoomed, setIsZoomed] = useState<boolean>(false)

  return <>{isZoomed ? <ZoomedImageView {...imageProps} /> : <Image {...imageProps} />}</>
}

export default ImageWithGestures
