import React from 'react';
import { render, mount } from 'enzyme';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Header from './Header';
import VariantChooser from '../VariantChooser';
import ServiceLocator from '../../../ServiceLocator';

describe('Shared/Components/Header', () => {
    it('renders with default props', () => {
        const tree = render(<Header />);
        expect(tree).toMatchSnapshot();
    });

    it('renders the title correctly', () => {
        const tree = render(<Header title={'My Product'} />);
        expect(tree).toMatchSnapshot();
    });

    it('renders the tools correctly on desktop size', () => {
        const tools = [
            {
                key: 'save',
                identifier: 'save',
                title: 'save',
            },
            {
                key: 'mail',
                identifier: 'mail',
                title: 'send mail',
            },
        ];
        const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'lg' } } });
        const wrapper = mount(
            <MuiThemeProvider theme={theme}>
                <Header tools={tools} />
            </MuiThemeProvider>
        );
        const save = wrapper.find('span[children="save"]');
        expect(save.length).toBe(1);
        const mail = wrapper.find('span[children="mail"]');
        expect(mail.length).toBe(1);
    });

    it('renders the tools correctly on mobile size', () => {
        const tools = [
            {
                key: 'save',
                identifier: 'save',
                title: 'save',
            },
            {
                key: 'mail',
                identifier: 'mail',
                title: 'send mail',
            },
        ];
        const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'xs' } } });
        const wrapper = mount(
            <MuiThemeProvider theme={theme}>
                <Header tools={tools} />
            </MuiThemeProvider>
        );
        wrapper.find('button[aria-label="Menu"]').simulate('click');
        const save = wrapper.find('span[children="save"]');
        expect(save.length).toBe(1);
        const mail = wrapper.find('span[children="mail"]');
        expect(mail.length).toBe(1);
    });

    it('the correct tool function is called', () => {
        const analyticsSrvc = new (class {
            static serviceName = 'AnalyticsService';
            triggerEvent = jest.fn();
        })();
        ServiceLocator.provide(analyticsSrvc);

        const tools = [
            {
                key: 'save',
                identifier: 'save',
                title: 'save',
                function: jest.fn(),
            },
            {
                key: 'mail',
                identifier: 'mail',
                title: 'send mail',
                function: jest.fn(),
            },
        ];
        const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'lg' } } });
        const wrapper = mount(
            <MuiThemeProvider theme={theme}>
                <Header tools={tools} />
            </MuiThemeProvider>
        );
        const save = wrapper.find('span[children="save"]');
        save.simulate('click');
        expect(tools[0].function).toHaveBeenCalled();
        expect(analyticsSrvc.triggerEvent.mock.calls[0][0]).toBe('header_save_configuration');
        const mail = wrapper.find('span[children="mail"]');
        mail.simulate('click');
        expect(tools[0].function).toHaveBeenCalled();
        expect(analyticsSrvc.triggerEvent.mock.calls[1][0]).toBe('header_email');
    });

    it('renders the custom VariantChooser and its extra info correctly', () => {
        const CustomVariantChooser = props => (
            <VariantChooser {...props} renderExtraInfo={() => <div>Extra info about the product</div>} />
        );
        const tree = render(<Header title={'My Product'} VariantChooserComponent={CustomVariantChooser} />);
        expect(tree).toMatchSnapshot();
    });
});
