import React from 'react';
import { render } from '@testing-library/react';
import { AppConfigContext, SuiteAppConfig } from '@theorchard/suite-config';
import { CountryFlag, CountryFlagIconProps, CountryFlagIcons } from '../countryFlag';

describe('<CountryFlag>', () => {
    const cdnUrl = 'https//cdn.test.com';

    function renderComponent<N extends keyof CountryFlagIcons, S extends keyof CountryFlagIcons[N]>(
        props: CountryFlagIconProps<N, S>
    ) {
        return render(<CountryFlag {...props} />, {
            wrapper: ({ children }) => (
                <AppConfigContext.Provider value={{ config: { cdnUrl } as SuiteAppConfig }}>
                    {children}
                </AppConfigContext.Provider>
            ),
        });
    }

    test('accepts "testId"', () => {
        const { getByTestId } = renderComponent({ countryCode: 'US', testId: 'UnitedStatesFlag' });

        const element = getByTestId('UnitedStatesFlag');
        expect(element).toBeInTheDocument();
    });

    test('accepts "className"', () => {
        const className = 'test-country';
        const { getByTestId } = renderComponent({ countryCode: 'NO', className });

        const element = getByTestId('NO-CountryFlag');
        expect(element).toHaveClass(className);
    });

    test('renders country flag image', () => {
        const { getByTestId } = renderComponent({ countryCode: 'US' });
        const element = getByTestId('US-CountryFlag');

        expect(element).toBeInTheDocument();
        expect(element).toHaveAttribute('title', 'United States');
    });

    describe('renders global flag svg', () => {
        test('using "GLOBAL" code', () => {
            const { getByTestId } = renderComponent({ countryCode: 'GLOBAL' });
            expect(getByTestId('WW-CountryFlag')).toBeInTheDocument();
            expect(getByTestId('WW-CountryFlag')).toHaveAttribute('title', 'Worldwide');
        });

        test('using "WW" reduced code', () => {
            const { getByTestId } = renderComponent({ countryCode: 'WW' });
            expect(getByTestId('WW-CountryFlag')).toBeInTheDocument();
        });
    });

    describe('with "showTitle" false', () => {
        test('skips rendering title', () => {
            const { container } = renderComponent({ countryCode: 'US', showTitle: false });
            const element = container.querySelector('title');

            expect(element).not.toBeInTheDocument();
        });
    });

    describe('renders missing svg', () => {
        test('using "MISSING" code', () => {
            const { getByTestId } = renderComponent({ countryCode: 'MISSING' });
            expect(getByTestId('MISSING-CountryFlag')).toBeInTheDocument();
            expect(getByTestId('MISSING-CountryFlag')).toHaveAttribute('title', 'Missing');
        });

        test('using unsupported code', () => {
            const { getByTestId } = renderComponent({ countryCode: 'XX' });
            expect(getByTestId('MISSING-CountryFlag')).toBeInTheDocument();
        });
    });

    describe('renders unknown svg', () => {
        test('using "UNKNOWN" code', () => {
            const { getByTestId } = renderComponent({ countryCode: 'UNKNOWN' });
            expect(getByTestId('UNKNOWN-CountryFlag')).toBeInTheDocument();
            expect(getByTestId('UNKNOWN-CountryFlag')).toHaveAttribute('title', 'Unknown');
        });

        test('when not passing in a code', () => {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const { getByTestId } = renderComponent({ countryCode: undefined } as any);
            expect(getByTestId('UNKNOWN-CountryFlag')).toBeInTheDocument();
        });
    });

    describe('with size prop', () => {
        test('renders 16 by default', () => {
            const { getByTestId } = renderComponent({ countryCode: 'US' });
            const element = getByTestId('US-CountryFlag');
            expect(element.getAttribute('src')).toMatch(/16-US/);
            expect(element).toHaveAttribute('width', '16');
            expect(element).toHaveAttribute('height', '16');
        });

        test('renders 24', () => {
            const { getByTestId } = renderComponent({ countryCode: 'US', size: 24 });
            const element = getByTestId('US-CountryFlag');
            expect(element.getAttribute('src')).toMatch(/24-US/);
            expect(element).toHaveAttribute('width', '24');
            expect(element).toHaveAttribute('height', '24');
        });
    });
});