import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ThemeProvider } from '../../theme';
import ConditionChips from './ConditionChips';

const OPTIONS = [
  { code: 'elderly', label: 'Elderly' },
  { code: 'diabetes', label: 'Diabetes' },
];

function renderChips(value: string[]) {
  const onChange = jest.fn();
  render(
    <ThemeProvider>
      <ConditionChips options={OPTIONS} value={value} onChange={onChange} />
    </ThemeProvider>,
  );
  return { onChange };
}

describe('<ConditionChips/> component', () => {
  it('renders every option', () => {
    renderChips([]);
    expect(screen.getByText('Elderly')).toBeInTheDocument();
    expect(screen.getByText('Diabetes')).toBeInTheDocument();
  });

  it('adds an unselected code on click', async () => {
    const user = userEvent.setup();
    const { onChange } = renderChips([]);
    await user.click(screen.getByText('Elderly'));
    expect(onChange).toHaveBeenCalledWith(['elderly']);
  });

  it('removes an already-selected code on click', async () => {
    const user = userEvent.setup();
    const { onChange } = renderChips(['elderly']);
    await user.click(screen.getByText('Elderly'));
    expect(onChange).toHaveBeenCalledWith([]);
  });
});
