import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { describe, expect, it } from 'vitest';
import { renderWithProviders } from '../test/render';
import { Segmented } from './Segmented';

function Harness() {
  const [value, setValue] = useState<'month' | 'week'>('month');
  return (
    <Segmented
      label="Granularitet"
      value={value}
      onChange={setValue}
      options={[
        { value: 'month', label: 'Månad' },
        { value: 'week', label: 'Vecka' },
      ]}
    />
  );
}

describe('Segmented', () => {
  it('is a radio group that changes by click and arrow keys', async () => {
    renderWithProviders(<Harness />);
    const user = userEvent.setup();
    expect(screen.getByRole('radiogroup', { name: 'Granularitet' })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: 'Månad' })).toBeChecked();
    await user.click(screen.getByRole('radio', { name: 'Vecka' }));
    expect(screen.getByRole('radio', { name: 'Vecka' })).toBeChecked();
    await user.keyboard('{ArrowRight}');
    expect(screen.getByRole('radio', { name: 'Månad' })).toBeChecked();
    expect(screen.getByRole('radio', { name: 'Månad' })).toHaveFocus();
  });
});