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

function Controlled({ onOre }: { onOre: (ore: number | null) => void }) {
  const [text, setText] = useState('');
  return (
    <AmountField
      label="Belopp"
      value={text}
      onChange={(next, ore) => {
        setText(next);
        onOre(ore);
      }}
    />
  );
}

describe('AmountField', () => {
  it.each<[Language, string]>([
    ['sv', 'kr'],
    ['en', 'SEK'],
  ])('converts typed text to öre and shows the unit (%s)', async (language, unit) => {
    let ore: number | null = null;
    renderWithProviders(<Controlled onOre={(value) => (ore = value)} />, { language });
    const input = screen.getByLabelText('Belopp');
    await userEvent.type(input, '1247,605-x');
    expect(input).toHaveValue('1247,60');
    expect(ore).toBe(124760);
    expect(screen.getByText(unit)).toBeInTheDocument();
  });
});