/* eslint-env jest */
import React from 'react';
import noop from 'lodash/noop';
import { mount, render } from 'enzyme';
import DesignAreaControlbox from './index';
import MenuItem from '@material-ui/core/MenuItem';
import ServiceLocator from 'App/ServiceLocator';

const hierarchicalMockData = [
    {
        identifier: 'Auf_Schaft_vorne',
        title: 'Auf Schaft vorne',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
        ],
    },
    {
        identifier: 'Auf_Schaft_hinten',
        title: 'Auf Schaft hinten',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
        ],
    },
];

it('renders correctly', () => {
    const tree = render(
        <DesignAreaControlbox
            designAreas={hierarchicalMockData}
            designedAreas={{ a_1: true }}
            valueProductionMethod={'Tampondruck (bis zu 4-farbig)'}
            valueDesignArea={{ designProductionMethods: [] }}
            handleChangeDesignArea={noop}
            handleChangeProductionMethod={noop}
        />
    );
    expect(tree).toMatchSnapshot();
});

it('renders a boxed component with the boxed prop', () => {
    const tree = render(
        <DesignAreaControlbox
            designAreas={hierarchicalMockData}
            designedAreas={{ a_1: true }}
            valueProductionMethod={'Tampondruck (bis zu 4-farbig)'}
            valueDesignArea={{ designProductionMethods: [] }}
            handleChangeDesignArea={noop}
            handleChangeProductionMethod={noop}
            boxed
        />
    );
    expect(tree).toMatchSnapshot();
});

it('calls the handleChangeColorAmount callback when the user clicks the DesignAreaControlbox button', () => {
    const onChangeHandler = jest.fn();
    const analyticsSrvc = new (class {
        static serviceName = 'AnalyticsService';
        triggerEvent = jest.fn();
    })();
    ServiceLocator.provide(analyticsSrvc);
    const tree = mount(
        <DesignAreaControlbox
            width="lg"
            designAreas={hierarchicalMockData}
            designedAreas={{ a_1: true }}
            valueProductionMethod={{ identifier: 'Tampondruck (bis zu 4-farbig)' }}
            valueDesignArea={{ designProductionMethods: [], identifier: 'Auf_Schaft_vorne' }}
            handleChangeDesignArea={onChangeHandler}
            handleChangeProductionMethod={noop}
        />
    );
    const button = tree.find('[role="button"]').at(0);
    button.simulate('mousedown', { button: 0 });
    const option = tree.find(MenuItem).at(1);
    option.simulate('click');
    expect(onChangeHandler).toHaveBeenCalled();
});
