import React from 'react';
import { render } from '@testing-library/react';
import { AppConfigContext, SuiteAppConfig } from '@theorchard/suite-config';
import { VariantType } from 'src/components/cdnAsset';
import { BrandIcon } from '../brandIcon';
import { CompanyIcon, CompanyIconProps, CompanyIcons } from '../companyIcon';

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

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

    test('renders a company svg image', () => {
        const { getByTestId } = renderComponent({ name: 'awal' });

        const imgElement = getByTestId('AwalBrandIcon');

        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('AwalBrandIcon');

        expect(imgElement).toHaveAttribute('width', '16');
        expect(imgElement).toHaveAttribute('height', '16');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/brands/awal-16-color`);
    });

    test('accepts icon variant', () => {
        const { getByTestId } = renderComponent({ name: 'knr', variant: 'dark' });

        const imgElement = getByTestId('KnrBrandIcon');

        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('KnrBrandIcon');

        expect(imgElement).toHaveAttribute('width', '16');
        expect(imgElement).toHaveAttribute('height', '16');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/brands/knr-16-dark`);
    });

    test('accepts size', () => {
        const { getByTestId } = renderComponent({ name: 'ab', size: '48', variant: 'light' });

        const imgElement = getByTestId('AbBrandIcon');

        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('AbBrandIcon');

        expect(imgElement).toHaveAttribute('width', '48');
        expect(imgElement).toHaveAttribute('height', '48');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/brands/ab-48-light`);
    });

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

        const imgElement = getByTestId('SmeBrandIcon');

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

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

        const imgElement = getByTestId(testId);

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

    test('accepts deprecated "brand" prop as a fallback for "name"', () => {
        const { getByTestId } = renderComponent({ brand: 'orchard' });

        const imgElement = getByTestId('OrchardBrandIcon');

        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('OrchardBrandIcon');
        expect(imgElement.getAttribute('src')).toMatch(`${cdnUrl}/assets/brands/orchard-16-color`);
    });

    test('renders BrandIcon (deprecated alias) with the same DOM as CompanyIcon', () => {
        const { getByTestId } = render(<BrandIcon name="awal" />, {
            wrapper: ({ children }) => (
                <AppConfigContext.Provider value={{ config: { cdnUrl } as SuiteAppConfig }}>
                    {children}
                </AppConfigContext.Provider>
            ),
        });

        const imgElement = getByTestId('AwalBrandIcon');
        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('AwalBrandIcon');
    });
});