import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { getOption, openSelect, getInputDisplayValue, queryOption } from 'lib/test-utils/select';
import { CountrySelect, CountrySelectProps } from '../countrySelect';

describe('<CountrySelect>', () => {
    const renderComponent = (props: Partial<CountrySelectProps> = {}) =>
        render(<CountrySelect {...props} />);

    testComponent(CountrySelect, {}, 'SuiteCountrySelect');

    test('renders flat list of countries by default', async () => {
        renderComponent();

        await openSelect('SuiteCountrySelect');

        expect(getOption({ label: 'Norway' })).toBeInTheDocument();
        expect(getOption({ label: 'Denmark' })).toBeInTheDocument();
        expect(queryOption({ label: 'Europe' })).toBeNull();
    });

    test('accepts a list of country codes as initial value', async () => {
        renderComponent({
            initialValue: 'no',
        });

        await openSelect('SuiteCountrySelect');

        expect(getInputDisplayValue()).toBe('Norway');
    });

    describe('with custom countries', () => {
        test('accepts country codes', async () => {
            renderComponent({
                countries: ['no', 'se'],
            });

            await openSelect('SuiteCountrySelect');

            expect(getOption({ label: 'Norway' })).toBeInTheDocument();
            expect(getOption({ label: 'Sweden' })).toBeInTheDocument();
        });

        test('accepts custom country info', async () => {
            renderComponent({
                countries: [
                    { value: 'no', label: 'Norge', continent: 'Fantasy Land' },
                    { value: 'sv', label: 'Sverige', continent: 'Fantasy Land' },
                ],
            });

            await openSelect('SuiteCountrySelect');

            expect(getOption({ label: 'Norge' })).toBeInTheDocument();
            expect(getOption({ label: 'Sverige' })).toBeInTheDocument();
        });
    });
});