import { TooltipDirection } from '@/models';
import { useTooltipHelper } from './tooltip.helper';

const { _getTranslatePosition, _shiftTranslatePosition } = useTooltipHelper();

describe('tooltip.helper', () => {
  describe('_getTranslatePosition', () => {
    test.each([
      [
        TooltipDirection.Top,
        { width: 40, height: 20 }, // anchor element
        { width: 200, height: 100 }, // tooltip element
        { x: -80, y: -100 }, // resulted
      ],
      [
        TooltipDirection.Bottom,
        { width: 40, height: 20 },
        { width: 200, height: 100 },
        { x: -80, y: 20 },
      ],
      [
        TooltipDirection.Right,
        { width: 40, height: 20 },
        { width: 200, height: 100 },
        { x: 40, y: -40 },
      ],
      [
        TooltipDirection.Left,
        { width: 40, height: 20 },
        { width: 200, height: 100 },
        { x: -200, y: -40 },
      ],
    ])(
      'calculate position on %s',
      (
        direction: TooltipDirection,
        anchorElement: { width: number; height: number },
        tooltipElement: { width: number; height: number },
        transformResult: { x: number; y: number },
      ) => {
        expect(
          _getTranslatePosition(direction, anchorElement, tooltipElement, 0),
        ).toStrictEqual(transformResult);
      },
    );
  });

  describe('_shiftTranslatePosition', () => {
    test.each([
      [
        'should shift to the right if overflows on left',
        TooltipDirection.Top,
        { left: 0, top: 0, right: 100, bottom: 50 },
        { width: 500, height: 500 },
        { x: -20, y: -20 },
        { shiftedX: -0, shiftedY: -20 },
      ],
      [
        'should shift to the bottom if overflows on top',
        TooltipDirection.Left,
        { left: 0, top: -50, right: 100, bottom: 0 },
        { width: 500, height: 500 },
        { x: -20, y: -20 },
        { shiftedX: -20, shiftedY: -50 },
      ],
    ])(
      '%s',
      (
        _comment: string,
        direction: TooltipDirection,
        tooltipElement: {
          left: number;
          top: number;
          right: number;
          bottom: number;
        },
        window: { width: number; height: number },
        translatePosition: { x: number; y: number },
        transformResult: { shiftedX: number; shiftedY: number },
      ) => {
        expect(
          _shiftTranslatePosition(
            direction,
            tooltipElement,
            window,
            translatePosition,
          ),
        ).toStrictEqual(transformResult);
      },
    );
  });
});
