import {useEffect, useRef, useCallback} from 'react';
import {
  GiphyDialog,
  GiphyDialogEvent,
  type GiphyMedia,
} from '@giphy/react-native-sdk';

function useLatest<V>(value: V) {
  const ref = useRef<V>(value);
  ref.current = value;
  return ref;
}

interface UseGifDialogOptions {
  onSelect: (media: GiphyMedia) => void;
  onDismiss?: () => void;
  enabled?: boolean;
}

export function useGifDialog({
  onSelect,
  onDismiss,
  enabled = true,
}: UseGifDialogOptions) {
  const onSelectRef = useLatest(onSelect);
  const onDismissRef = useLatest(onDismiss);

  useEffect(() => {
    if (!enabled) return;

    const mediaSelectedListener = GiphyDialog.addListener(
      GiphyDialogEvent.MediaSelected,
      ({media}: {media: GiphyMedia}) => {
        onSelectRef.current(media);
        GiphyDialog.hide();
      },
    );

    const dismissedListener = GiphyDialog.addListener(
      GiphyDialogEvent.Dismissed,
      () => {
        onDismissRef.current?.();
      },
    );

    return () => {
      mediaSelectedListener.remove();
      dismissedListener.remove();
    };
  }, [enabled, onSelectRef, onDismissRef]);

  const showDialog = useCallback(() => {
    if (!enabled) return;

    GiphyDialog.show();
  }, [enabled]);

  return {
    showDialog,
  };
}