import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../../test-utils';

import { CurrencySelector } from './CurrencySelector';

mockMatchMedia();
mockResizeObserver();

describe('CurrencySelector', () => {
  it('can change currency', async () => {
    const onChange = jest.fn();
    render(
      <CurrencySelector
        options={mockCurrencies}
        id="id"
        currency="USD"
        labelId="labelId"
        onChange={onChange}
      />,
    );

    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));

    await userEvent.click(
      screen.getByRole('option', {
        name: /aed united arab emirates dirham/iu,
      }),
    );

    expect(onChange).toHaveBeenCalledWith('AED');
  });

  it('locks the input when no onChange is provided', async () => {
    render(<CurrencySelector options={mockCurrencies} id="id" currency="USD" labelId="labelId" />);

    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));

    expect(screen.getByRole('combobox')).toBeDisabled();
  });

  it('enables currency selection when just one group with multiple currencies', async () => {
    render(
      <CurrencySelector
        options={[
          {
            title: 'Popular',
            currencies: [
              {
                code: 'USD',
                label: 'US Dollar',
                keywords: ['USD', 'US Dollar'],
              },
              {
                code: 'EUR',
                label: 'Euro',
                keywords: ['EUR', 'Euro'],
              },
            ],
          },
        ]}
        id="id"
        currency="USD"
        labelId="labelId"
        onChange={jest.fn()}
      />,
    );

    expect(screen.getByRole('combobox')).toBeEnabled();
  });

  it('disables currency selection when just one currency', async () => {
    render(
      <CurrencySelector
        options={[
          {
            title: 'Popular',
            currencies: [
              {
                code: 'USD',
                label: 'US Dollar',
                keywords: ['USD', 'US Dollar'],
              },
            ],
          },
        ]}
        id="id"
        currency="USD"
        labelId="labelId"
        onChange={jest.fn()}
      />,
    );

    expect(screen.getByRole('combobox')).toBeDisabled();
  });

  it('deduplicates currencies while searching', async () => {
    render(
      <CurrencySelector
        options={mockCurrencies}
        id="id"
        currency="USD"
        labelId="labelId"
        onChange={jest.fn()}
      />,
    );

    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));

    await userEvent.type(
      screen.getByRole('combobox', {
        name: /type a currency \/ country/iu,
      }),
      'EUR',
    );

    expect(screen.getAllByRole('option')).toHaveLength(1);
  });
});

const mockCurrencies = [
  {
    title: 'Popular',
    currencies: [
      {
        code: 'USD',
        label: 'US Dollar',
        keywords: ['USD'],
      },
      {
        code: 'EUR',
        label: 'Euro',
        keywords: ['EUR'],
      },
    ],
  },
  {
    title: 'All',
    currencies: [
      {
        code: 'AED',
        label: 'United Arab Emirates Dirham',
        keywords: ['AED'],
      },
      {
        code: 'AFN',
        label: 'Afghan Afghani',
        keywords: ['AFN'],
      },
      {
        code: 'EUR',
        label: 'Euro',
        keywords: ['EUR', 'saudi arabia'],
      },
      {
        code: 'AUD',
        label: 'Australian Dollar',
        keywords: ['AUD', 'australia'],
      },
    ],
  },
];
