import React from 'react';
import { renderHook } from '@testing-library/react-native';
import { useOverlayCrossfade } from '../../hooks/drag/useOverlayCrossfade';
import { DragStateProvider } from '../../contexts/DragStateContext';

describe('useOverlayCrossfade', () => {
  const createWrapper = () => {
    const Wrapper = ({ children }: { children: React.ReactNode }) => (
      <DragStateProvider>{children}</DragStateProvider>
    );
    return Wrapper;
  };

  it('should render without crashing', async () => {
    const { result } = await renderHook(() => useOverlayCrossfade(), {
      wrapper: createWrapper(),
    });

    // Hook returns void, so just verify it doesn't throw
    expect(result.current).toBeUndefined();
  });

  it('should work with custom drag config', async () => {
    const Wrapper = ({ children }: { children: React.ReactNode }) => (
      <DragStateProvider config={{ dragScale: 1.1 }}>
        {children}
      </DragStateProvider>
    );

    const { result } = await renderHook(() => useOverlayCrossfade(), {
      wrapper: Wrapper,
    });

    expect(result.current).toBeUndefined();
  });

  it('should not throw when called multiple times', async () => {
    const { result, rerender } = await renderHook(() => useOverlayCrossfade(), {
      wrapper: createWrapper(),
    });

    // Rerender multiple times to verify stability
    await rerender({});
    await rerender({});

    expect(result.current).toBeUndefined();
  });

  it('should handle context unmount gracefully', async () => {
    const { unmount } = await renderHook(() => useOverlayCrossfade(), {
      wrapper: createWrapper(),
    });

    // Should not throw on unmount
    expect(() => unmount()).not.toThrow();
  });
});