import { describe, it, expect, beforeEach } from 'vitest';
import { render } from '@testing-library/react';
import { DndContext } from '@dnd-kit/core';
import JewelryCanvas from './JewelryCanvas';
import { useDesignStore } from '../store/designStore';

function renderCanvas() {
  return render(
    <DndContext>
      <JewelryCanvas />
    </DndContext>,
  );
}

describe('JewelryCanvas', () => {
  beforeEach(() => {
    // Reset to default state (M/8mm = 22 slots)
    useDesignStore.setState({
      zoom: 1.0,
      size: { label: 'M', circumferenceCm: 18 },
      stoneSizeMm: 8,
    });
    // Rebuild slots via setSize to ensure positions are generated
    useDesignStore.getState().setSize({ label: 'M', circumferenceCm: 18 });
  });

  it('renders a slot element for each slot in the store', () => {
    const { container } = renderCanvas();
    const slotCount = useDesignStore.getState().slotCount;
    // Each BeadSlotView renders an absolutely positioned div
    const slots = container.querySelectorAll('.absolute');
    // +1 because the canvas wrapper itself is not absolute, but each slot is
    expect(slots.length).toBe(slotCount);
  });

  it('applies zoom transform', () => {
    useDesignStore.setState({ zoom: 1.5 });
    const { container } = renderCanvas();
    const canvas = container.firstElementChild as HTMLElement;
    expect(canvas.style.transform).toBe('scale(1.5)');
  });

  it('renders fewer slots when size is smaller', () => {
    useDesignStore.getState().setSize({ label: 'S', circumferenceCm: 16 });
    const { container } = renderCanvas();
    const slotCount = useDesignStore.getState().slotCount;
    expect(slotCount).toBe(20); // 16*10/8 = 20
    const slots = container.querySelectorAll('.absolute');
    expect(slots.length).toBe(20);
  });
});
