import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { ToggleGroup, ToggleGroupItem } from './toggle-group';
import React from 'react';

describe('ToggleGroup', () => {
  it('renders correctly with items', () => {
    render(
      <ToggleGroup type="single">
        <ToggleGroupItem value="a">A</ToggleGroupItem>
        <ToggleGroupItem value="b">B</ToggleGroupItem>
      </ToggleGroup>
    );

    expect(screen.getByText('A')).toBeInTheDocument();
    expect(screen.getByText('B')).toBeInTheDocument();
  });

  it('handles single selection', () => {
    const onValueChange = vi.fn();
    render(
      <ToggleGroup type="single" onValueChange={onValueChange}>
        <ToggleGroupItem value="a">A</ToggleGroupItem>
        <ToggleGroupItem value="b">B</ToggleGroupItem>
      </ToggleGroup>
    );

    fireEvent.click(screen.getByText('B'));
    expect(onValueChange).toHaveBeenCalledWith('b');
  });

  it('handles multiple selection', () => {
    const onValueChange = vi.fn();
    render(
      <ToggleGroup type="multiple" onValueChange={onValueChange}>
        <ToggleGroupItem value="a">A</ToggleGroupItem>
        <ToggleGroupItem value="b">B</ToggleGroupItem>
      </ToggleGroup>
    );

    fireEvent.click(screen.getByText('A'));
    expect(onValueChange).toHaveBeenCalledWith(['a']);

    fireEvent.click(screen.getByText('B'));
    expect(onValueChange).toHaveBeenCalledWith(['a', 'b']);
  });
});