import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Isotype } from './Isotype';
import { getIsotypeVariant, ISOTYPE_PATTERNS } from './patterns';
import React from 'react';

function countTransparentCells(container: HTMLElement): number {
  const cells = Array.from(container.firstChild!.childNodes) as HTMLElement[];
  return cells.filter(cell => !cell.style.backgroundColor).length;
}

describe('Isotype', () => {
  it('renders 16 cells with exactly 1 blank in the base pattern', () => {
    const { container } = render(<Isotype />);
    const cells = container.firstChild!.childNodes;
    expect(cells).toHaveLength(16);
    expect(countTransparentCells(container)).toBe(1);
  });

  it('renders exactly 2 blanks when a variantSeed is given', () => {
    const { container } = render(<Isotype variantSeed={3} />);
    expect(countTransparentCells(container)).toBe(2);
  });

  it('getIsotypeVariant is deterministic for the same seed', () => {
    expect(getIsotypeVariant('core', 5)).toEqual(getIsotypeVariant('core', 5));
  });

  it('passes className through to the root', () => {
    const { container } = render(<Isotype className="w-64" />);
    expect((container.firstChild as HTMLElement).className).toContain('w-64');
  });

  it('defaults to the core pattern', () => {
    const { container } = render(<Isotype />);
    const cells = Array.from(container.firstChild!.childNodes) as HTMLElement[];
    const colors = cells.map(cell => cell.style.backgroundColor || 'blank');
    const expectedBlankIndex = ISOTYPE_PATTERNS.core.indexOf('blank');
    expect(colors[expectedBlankIndex]).toBe('blank');
  });
});