import { describe, expect, it } from 'vitest';
import { canWheelScrollInsideTarget } from './dom-scroll';

function setElementMetrics(
  element: HTMLElement,
  metrics: Partial<{
    clientHeight: number;
    clientWidth: number;
    scrollHeight: number;
    scrollWidth: number;
  }>
) {
  for (const [key, value] of Object.entries(metrics)) {
    Object.defineProperty(element, key, { configurable: true, value });
  }
}

describe('canWheelScrollInsideTarget', () => {
  it('allows horizontal wheel gestures inside a horizontal scroller', () => {
    const scroller = document.createElement('div');
    scroller.style.overflowX = 'auto';
    scroller.scrollLeft = 20;
    setElementMetrics(scroller, { clientWidth: 100, scrollWidth: 240 });

    const child = document.createElement('button');
    scroller.appendChild(child);
    document.body.appendChild(scroller);

    expect(canWheelScrollInsideTarget(child, 40, 0)).toBe(true);
    scroller.remove();
  });

  it('allows vertical wheel gestures inside a vertical scroller', () => {
    const scroller = document.createElement('div');
    scroller.style.overflowY = 'auto';
    scroller.scrollTop = 20;
    setElementMetrics(scroller, { clientHeight: 100, scrollHeight: 240 });

    const child = document.createElement('button');
    scroller.appendChild(child);
    document.body.appendChild(scroller);

    expect(canWheelScrollInsideTarget(child, 60, 20)).toBe(true);
    scroller.remove();
  });

  it('does not allow horizontal gestures at the edge of a scroller', () => {
    const scroller = document.createElement('div');
    scroller.style.overflowX = 'auto';
    scroller.scrollLeft = 0;
    setElementMetrics(scroller, { clientWidth: 100, scrollWidth: 240 });

    document.body.appendChild(scroller);

    expect(canWheelScrollInsideTarget(scroller, -40, 0)).toBe(false);
    scroller.remove();
  });
});
