import React from 'react'
import { PropsOf } from '@codeleap/types'
import { onUpdate } from '@codeleap/hooks'

import _ImageView from 'react-native-image-viewing'
import { StatusBar } from 'react-native'

export type ImageViewProps = PropsOf<typeof _ImageView>

/**
 * Hides the status bar while the viewer is open via an imperative StatusBar call.
 * `presentationStyle='overFullScreen'` is forced so the viewer covers navigation bars;
 * overriding it will break the full-screen illusion on iOS.
 * `doubleTapToZoomEnabled` is off by default to avoid conflicting gesture handlers in lists.
 */
export const ImageView = (props: ImageViewProps) => {
  onUpdate(() => {
    StatusBar.setHidden(props.visible)
  }, [props.visible])

  return (
    // @ts-ignore
    <_ImageView
      doubleTapToZoomEnabled={false}
      presentationStyle={'overFullScreen'}
      {...props}
    />
  )
}