import { renderHook } from '@testing-library/react';
import { useArrowSize } from '../useArrowSize';

// Mock the helpers
jest.mock('../../services/helpers', () => ({
  Helpers: {
    calculateArrowSize: jest.fn((width: number) => {
      if (width < 200) return 'nano';
      if (width < 300) return 'micro';
      if (width < 650) return 'small';
      if (width < 800) return 'compact';
      if (width < 1000) return 'medium';
      return 'large';
    }),
  },
}));

describe('useArrowSize', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  test('returns compact for desktop with default width', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 700,
        isMobile: false,
      }),
    );

    expect(result.current).toBe('compact');
  });

  test('returns medium for mobile regardless of width', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 150,
        isMobile: true,
      }),
    );

    expect(result.current).toBe('medium');
  });

  test('returns nano for very small containers on desktop', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 150,
        isMobile: false,
      }),
    );

    expect(result.current).toBe('nano');
  });

  test('returns small for medium containers on desktop', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 600,
        isMobile: false,
      }),
    );

    expect(result.current).toBe('small');
  });

  test('returns large for wide containers on desktop', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 1200,
        isMobile: false,
      }),
    );

    expect(result.current).toBe('large');
  });

  test('returns medium when disabled', () => {
    const { result } = renderHook(() =>
      useArrowSize({
        width: 150, // This would normally be nano
        isMobile: false,
        disabled: true,
      }),
    );

    expect(result.current).toBe('medium');
  });
});