import React from 'react';
import { render, mount } from 'enzyme/build';
import '../../../../__mocks__/matchMedia';
import { Configurator } from '../Screen';
jest.mock('react-file-drop/dist/FileDrop/FileDrop.js', () => ({}));
import { ThemeMixer } from '../ThemeProvider';
import { createStoreProvider } from '../../../../Utils/Test/createStoreProvider';
import ServiceLocator from '../../../ServiceLocator';
jest.mock('react-router');
import { useParams } from 'react-router';

describe('Screen component', () => {
    ServiceLocator.provide(
        new (class {
            static serviceName = 'VisualizationService';
            getComponent() {
                return null;
            }
            enableDesignAreaInteraction() {
                return null;
            }
            initDesignAreaInteraction() {
                return null;
            }
            registerComponentChangeListener() {
                return null;
            }
        })()
    );
    useParams.mockImplementation(() => ({}));

    it('renders the custom elements', () => {
        const { StoreProvider } = createStoreProvider();
        const tree = render(
            <StoreProvider>
                <Configurator
                    {...{
                        // exclude the not relevant parts
                        renderLandscapeInformation: () => null,
                        ThemeProvider: ThemeMixer,
                        CanvasProvider: ({ children }) => children,
                        customElements: {
                            main: <div>custom component in the main area</div>,
                            root: <div>custom component in the root area</div>,
                        },
                    }}
                />
            </StoreProvider>
        );
        expect(tree).toMatchSnapshot();
    });
    it('renders the creator screen', () => {
        const { StoreProvider } = createStoreProvider();
        const CreatorScreen = () => null;
        const treeCreator = mount(
            <StoreProvider>
                <Configurator
                    {...{
                        // exclude the not relevant parts
                        renderLandscapeInformation: () => null,
                        ThemeProvider: ThemeMixer,
                        CanvasProvider: ({ children }) => children,
                        selectedConfigurationMode: 'creator',
                        CreatorScreen,
                    }}
                />
            </StoreProvider>
        );
        expect(treeCreator.find('CreatorScreen').length).toBe(1);
        expect(treeCreator.find('DesignerScreen').length).toBe(0);
    });

    it('renders the designer screen', () => {
        const { StoreProvider } = createStoreProvider();
        const DesignerScreen = () => null;
        const treeDesigner = mount(
            <StoreProvider>
                <Configurator
                    {...{
                        // exclude the not relevant parts
                        renderLandscapeInformation: () => null,
                        ThemeProvider: ThemeMixer,
                        CanvasProvider: ({ children }) => children,
                        selectedConfigurationMode: 'designer',
                        DesignerScreen,
                    }}
                />
            </StoreProvider>
        );
        expect(treeDesigner.find('CreatorScreen').length).toBe(0);
        expect(treeDesigner.find('DesignerScreen').length).toBe(1);
    });
});
