import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Checkbox } from './checkbox';

describe('Checkbox', () => {
  it('toggles when clicked', async () => {
    const onCheckedChange = vi.fn();
    render(<Checkbox aria-label="Accept" onCheckedChange={onCheckedChange} />);

    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
    expect(checkbox).toHaveAttribute('data-state', 'unchecked');

    await userEvent.click(checkbox);

    expect(onCheckedChange).toHaveBeenCalledWith(true);
    expect(checkbox).toHaveAttribute('data-state', 'checked');
  });

  it('does not toggle while disabled', async () => {
    const onCheckedChange = vi.fn();
    render(<Checkbox aria-label="Accept" disabled onCheckedChange={onCheckedChange} />);

    await userEvent.click(screen.getByRole('checkbox', { name: 'Accept' }));

    expect(onCheckedChange).not.toHaveBeenCalled();
  });

  it('reports the indeterminate state to assistive technology', () => {
    render(<Checkbox aria-label="Select all" checked="indeterminate" />);

    const checkbox = screen.getByRole('checkbox', { name: 'Select all' });
    expect(checkbox).toHaveAttribute('data-state', 'indeterminate');
    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
  });

  it('stays controlled when a checked prop is supplied', async () => {
    render(<Checkbox aria-label="Accept" checked={false} onCheckedChange={vi.fn()} />);

    await userEvent.click(screen.getByRole('checkbox', { name: 'Accept' }));

    expect(screen.getByRole('checkbox', { name: 'Accept' })).toHaveAttribute(
      'data-state',
      'unchecked'
    );
  });
});