import { describe, expect, it } from 'vitest';
import { tabRowLayout } from '../../src/editor/tabRow';

/** The nine tabs as measured in the browser at padding 4, in their editor order. */
const TABS = [
  { key: 'scene', width: 53 },
  { key: 'game', width: 50 },
  { key: 'graph', width: 74 },
  { key: 'statemachine', width: 114 },
  { key: 'shader', width: 61 },
  { key: 'texture', width: 64 },
  { key: 'animation', width: 83 },
  { key: 'container', width: 81 },
  { key: 'list', width: 35 },
];

const layout = (available: number, active: string) =>
  tabRowLayout({ tabs: TABS, available, gap: 2, overflowWidth: 28, active });

describe('tab row', () => {
  it('hides nothing while the row fits', () => {
    const { shown, hidden } = layout(631, 'scene');
    expect(hidden).toEqual([]);
    expect(shown).toHaveLength(9);
  });

  it('hides the tail one pixel short of fitting', () => {
    expect(layout(630, 'scene').hidden).toEqual(['list']);
  });

  it('keeps the tabs in order', () => {
    expect(layout(400, 'scene').shown).toEqual(['scene', 'game', 'graph', 'statemachine', 'shader']);
  });

  it('shows the active tab even when it sits past the room there is', () => {
    const { shown, hidden } = layout(400, 'container');
    expect(shown).toContain('container');
    expect(hidden).toContain('shader');
    // It went in at the back, so the row still reads left to right.
    expect(shown[shown.length - 1]).toBe('container');
  });

  it('gives up every other tab before it drops the active one', () => {
    expect(layout(60, 'animation')).toEqual({
      shown: ['animation'],
      hidden: ['scene', 'game', 'graph', 'statemachine', 'shader', 'texture', 'container', 'list'],
    });
  });
});