import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { IsotypeMini } from './IsotypeMini';
import { getIsotypeMiniVariant } from './mini-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;
}

function getCellColors(container: HTMLElement): string[] {
  return Array.from(container.firstChild!.childNodes).map(
    node => (node as HTMLElement).style.backgroundColor
  );
}

describe('IsotypeMini', () => {
  it('renders 9 cells with no blanks in the base pattern', () => {
    const { container } = render(<IsotypeMini />);
    const cells = container.firstChild!.childNodes;
    expect(cells).toHaveLength(9);
    expect(countTransparentCells(container)).toBe(0);
  });

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

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

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

  it('defaults to the core pattern', () => {
    const { container: defaultContainer } = render(<IsotypeMini />);
    const { container: explicitContainer } = render(<IsotypeMini pattern="core" />);
    expect(getCellColors(defaultContainer)).toEqual(getCellColors(explicitContainer));
  });
});