import {
  ImagePreview,
  ImagePreviewProps,
  ImagePreviewPropsRef,
} from './ImagePreview'
import { imperative } from '../../utils'

export const show = (props: ImagePreviewProps) => {
  imperative<ImagePreviewProps, ImagePreviewPropsRef>(
    ({ ref, unmount, container }) => ({
      component: ImagePreview,
      props: {
        ...props,
        popupProps: {
          ...props.popupProps,
          container,
          onExited: () => {
            props.popupProps?.onExited?.()
            unmount()
          },
        },
        onVisible: (visible) => {
          ref.current?.$$setProps({
            visible: false,
          })
          props.onVisible?.(visible)
        },
      },
      afterRender() {
        ref.current?.$$setProps({
          visible: true,
        })
      },
    })
  )
}