import React from 'react';
import { render } from '@testing-library/react';
import { AppConfigContext, SuiteAppConfig } from '@theorchard/suite-config';
import { VariantType } from 'src/components/cdnAsset';
import { StoreIcon, StoreIconProps, StoreIcons } from '../storeIcon';

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

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

    test('renders a store svg icon', () => {
        const { getByTestId } = renderComponent({ name: 'amazon' });

        const imgElement = getByTestId('AmazonStoreIcon');

        expect(imgElement).toHaveClass('StoreIcon');
        expect(imgElement).toHaveClass('AmazonStoreIcon');

        expect(imgElement).toHaveAttribute('width', '16');
        expect(imgElement).toHaveAttribute('height', '16');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/stores/amazon-16-primary`);
    });

    test('accepts size', () => {
        const { getByTestId } = renderComponent({ name: 'google', size: '12' });

        const imgElement = getByTestId('GoogleStoreIcon');

        expect(imgElement).toHaveClass('StoreIcon');
        expect(imgElement).toHaveClass('GoogleStoreIcon');

        expect(imgElement).toHaveAttribute('width', '12');
        expect(imgElement).toHaveAttribute('height', '12');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/stores/google-12-primary`);
    });

    test('accepts "className"', () => {
        const className = 'custom-class';
        const { getByTestId } = renderComponent({ name: 'spotify', className });

        const imgElement = getByTestId('SpotifyStoreIcon');

        expect(imgElement).toHaveClass(className);
    });

    test('accepts "testId"', () => {
        const testId = 'custom-class';
        const { getByTestId } = renderComponent({ name: 'appleMusic', testId });

        const imgElement = getByTestId(testId);

        expect(imgElement).toBeInTheDocument();
    });
});