/**
 * The magnet in the tab headers (#194): one icon toggle for every tab that snaps, graph canvas and
 * vector art alike. Driven through the button's own `onClick`, the path a click takes.
 */
import { beforeAll, describe, expect, it, vi } from 'vitest';
import { CanvasTextMetrics } from 'pixi.js';
import { SnapToggle } from '../../src/editor/graph/SnapToggle';
import { Theme } from '../../src/ui';

// Node has no DOMParser to read the file with; what the magnet looks like is the icon tests' job.
vi.mock('../../src/ui/svg', () => ({ drawSvg: () => undefined, tintSvg: (svg: string) => svg }));

beforeAll(() => {
  CanvasTextMetrics.measureText = (() => ({ width: 10, height: 10, lines: [], lineWidths: [] })) as never;
});

function target() {
  const calls: boolean[] = [];
  return { calls, setSnapping: (on: boolean) => calls.push(on) };
}

describe('SnapToggle', () => {
  it('is a square icon button without a caption', () => {
    const snap = new SnapToggle(() => target());
    expect(snap.widgets).toEqual([snap.button]);
    expect(snap.button.measure().w).toBe(Theme.controlHeight);
    expect(snap.button.text).toBe('');
  });

  it('starts off and switches the target on and off again, lit while on', () => {
    const canvas = target();
    const snap = new SnapToggle(() => canvas);
    expect(snap.button.toggled).toBe(false);

    snap.button.onClick?.();
    expect(snap.button.toggled).toBe(true);

    snap.button.onClick?.();
    expect(snap.button.toggled).toBe(false);
    expect(canvas.calls).toEqual([true, false]);
  });

  it('asks for the target at the click, so a canvas mounted later is the one switched', () => {
    let canvas = target();
    const snap = new SnapToggle(() => canvas);
    const later = target();
    canvas = later;
    snap.set(true);
    expect(later.calls).toEqual([true]);
  });
});