import '@testing-library/jest-dom';
import { within } from '@testing-library/react';
import { Fragment } from 'react';
import { expectStylesInDom } from '../__mocks__';
import {
    createRegisterHarness,
    optionalLibraryWrappers,
} from '../__mocks__/register-anvil2-harness';

function mockComponent(name: string) {
    return {
        [name]: ({ children }: any) => (
            <Fragment>
                <div>{`<${name}>`}</div>
                {children}
            </Fragment>
        ),
    };
}

function mockContext(name: string) {
    return {
        [name]: {
            Provider: ({ children }: any) => (
                <Fragment>
                    <div>{`<${name}.Provider>`}</div>
                    {children}
                </Fragment>
            ),
        },
    };
}

jest.mock('@servicetitan/anvil2', () => ({
    ...mockComponent('PortalProvider'),
}));

jest.mock('@servicetitan/design-system', () => ({
    ...mockContext('DefaultPortalContext'),
    ...mockContext('TablePopupPropsContext'),
}));

describe('[web-components] register', () => {
    const { Page, subject } = createRegisterHarness('mock-anvil2-app');

    describe('when Anvil2 bundle is present in the DOM', () => {
        let cssLink: HTMLLinkElement;

        beforeEach(() => {
            cssLink = Object.assign(document.createElement('link'), {
                href: 'http://localhost/anvil2.foobar.bundle.css',
                rel: 'stylesheet',
            });
            document.body.appendChild(cssLink);
        });

        afterEach(() => {
            cssLink.remove();
        });

        test('loads the styles into the component shadow DOM', () => {
            subject();

            expectStylesInDom(cssLink.href, () => Page.componentShadowRoot);
        });

        test('loads the styles into the portal shadow DOM', () => {
            subject();

            expectStylesInDom(cssLink.href, () => Page.portalShadowRoot);
        });
    });

    test.each(Object.values(optionalLibraryWrappers).flat())('wraps component within %s', name => {
        subject();

        const element = within(Page.componentShadowRoot as any).queryByText(`<${name}>`);
        expect(element).toBeInTheDocument();
    });
});