/* eslint-env jest */
import React from 'react';
import noop from 'lodash/noop';
import { mount, render } from 'enzyme';
import CalculationWidget from './index';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';

import ServiceLocator from 'App/ServiceLocator';

const designAreas = [
    {
        name: 'Auf Schaft',
        identifier: 'auf_schaft',
    },
    {
        name: 'Auf Clip',
        identifier: 'auf_clip',
    },
    {
        name: 'Auf Schaft Rückseite',
        identifier: 'auf_schaft_rueckseite',
    },
    {
        name: 'Druckknopf',
        identifier: 'druckknopf',
    },
];

const productionMethod = [
    {
        name: 'Druck',
        identifier: 'Druck',
    },
    {
        name: 'Prägung',
        identifier: 'Prägung',
    },
    {
        name: 'Gravur',
        identifier: 'Gravur',
    },
];

const colorAmounts = [
    {
        name: '1 farbig',
        identifier: '1 farbig',
    },
    {
        name: '2 farbig',
        identifier: '2 farbig',
    },
    {
        name: '3 farbig',
        identifier: '3 farbig',
    },
];

it('renders correctly', () => {
    const tree = render(
        <CalculationWidget
            designAreas={designAreas}
            amountValue={100}
            designProductionMethods={productionMethod}
            colorAmountList={colorAmounts}
            onChangeAmount={noop}
            handleChangeDesignProductionMethod={noop}
            handleChangeSelectedColorAmount={noop}
        />
    );
    expect(tree).toMatchSnapshot();
});

/*Test doesn't run and should be fixed in a separate task*/
it.skip('tests if the amount is updated', () => {
    const onChangeHandler = jest.fn();
    const tree = mount(
        <CalculationWidget
            designAreas={designAreas}
            amountValue={103}
            designProductionMethods={productionMethod}
            colorAmountList={colorAmounts}
            onChangeAmount={onChangeHandler}
            handleChangeDesignProductionMethod={noop}
            handleChangeSelectedColorAmount={noop}
        />
    );

    const input = tree.find('TextField').find('input');
    input.simulate('change');
    expect(onChangeHandler.mock.calls[0][0].target.value).toEqual('103');
});

it('returns a callback for design production methods change', () => {
    const onChangeHandler = jest.fn();
    const analyticsSrvc = new (class {
        static serviceName = 'AnalyticsService';
        triggerEvent = jest.fn();
    })();
    ServiceLocator.provide(analyticsSrvc);
    const tree = mount(
        <CalculationWidget
            designAreas={designAreas}
            amountValue={100}
            designProductionMethods={productionMethod}
            colorAmountList={colorAmounts}
            onChangeAmount={noop}
            handleChangeDesignProductionMethod={onChangeHandler}
            handleChangeSelectedColorAmount={noop}
        />
    );

    //opens expansion panel
    const select = tree
        .find(ExpansionPanel)
        .find(ExpansionPanelDetails)
        .at(0)
        .find(Select)
        .at(0);
    select.simulate('click');

    //opens Dropdown
    const button = select.find('[role="button"]');
    button.simulate('mousedown', { button: 0 });

    //change menuItem

    const option = tree.find(MenuItem).at(2);
    option.simulate('click');
    expect(onChangeHandler).toHaveBeenCalled();
});

it('returns a callback for handleChangeSelectedColorAmount', () => {
    const onChangeHandler = jest.fn();
    const tree = mount(
        <CalculationWidget
            designAreas={designAreas}
            amountValue={100}
            designProductionMethods={productionMethod}
            colorAmountList={colorAmounts}
            onChangeAmount={noop}
            handleChangeDesignProductionMethod={noop}
            handleChangeSelectedColorAmount={onChangeHandler}
        />
    );

    //opens expansion panel
    const select = tree
        .find(ExpansionPanel)
        .find(ExpansionPanelDetails)
        .at(0)
        .find(Select)
        .at(1);
    select.simulate('click');

    //opens Dropdown
    const button = select.find('[role="button"]');
    button.simulate('mousedown', { button: 0 });

    //change menuItem

    const option = tree.find(MenuItem).at(2);
    option.simulate('click');
    expect(onChangeHandler).toHaveBeenCalled();
});
