import { render, screen } from '../../test-utils';
import userEvent from '@testing-library/user-event';
import { ListItem, type ListItemProps } from '../ListItem';

describe('ListItem.Switch', () => {
  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
    render(<ListItem title="Test title" {...overrides} />);

  it('renders switch with correct role', () => {
    renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
    expect(screen.getByRole('switch')).toBeInTheDocument();
  });

  describe('checked state', () => {
    it('reflects checked state', () => {
      renderWith({ control: <ListItem.Switch checked onClick={() => {}} /> });
      expect(screen.getByRole('switch')).toBeChecked();
    });

    it('reflects unchecked state', () => {
      renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
      expect(screen.getByRole('switch')).not.toBeChecked();
    });
  });

  it('handles onClick events', async () => {
    const handleClick = jest.fn();
    renderWith({ control: <ListItem.Switch checked={false} onClick={handleClick} /> });

    await userEvent.click(screen.getByRole('switch'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('is disabled when ListItem is disabled', async () => {
    const handleClick = jest.fn();
    renderWith({
      disabled: true,
      control: <ListItem.Switch checked={false} onClick={handleClick} />,
    });

    const switchElement = screen.getByRole('switch');
    expect(switchElement).toBeDisabled();

    await userEvent.click(screen.getByRole('switch'));
    expect(handleClick).not.toHaveBeenCalled();
  });
});