import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { mount, render } from 'enzyme';
import noop from 'lodash/noop';
import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
import ProductPart from './index';

const initialState = {
    displaySwitchedOptions: false,
    optionclassification: {
        identifier: 'seat',
        title: 'Seat',
        thumbnail: '/images/components/seat.png',
    },
    selectedOption: {
        identifier: 'seat',
    },
    selectedOption2: {
        identifier: 'back',
    },
    onSelect: noop,
};

const reducer = (state = {}, action) => {
    return { ...action, ...state };
};
const store = createStore(reducer, {
    i18n: {
        locale: 'en-GB',
    },
});

const createProductPart = data => (
    <Provider store={store}>
        <DefaultThemeProvider>
            <ProductPart {...data} />
        </DefaultThemeProvider>
    </Provider>
);

describe('ProductPart', () => {
    it('renders without marker', () => {
        const testProductPart = {
            displaySwitchedOptions: initialState.displaySwitchedOptions,
            optionclassification: initialState.optionclassification,
            selectedOption: initialState.selectedOption2,
            onSelect: initialState.onSelect,
        };
        const tree = render(createProductPart(testProductPart));
        expect(tree).toMatchSnapshot();
    });
    it('renders without marker when menu is closed', () => {
        const testProductPart = {
            displaySwitchedOptions: initialState.displaySwitchedOptions,
            optionclassification: initialState.optionclassification,
            selectedOption: initialState.selectedOption,
            onSelect: initialState.onSelect,
            optionListVisible: false,
        };
        const tree = render(createProductPart(testProductPart));
        expect(tree).toMatchSnapshot();
    });
    it('renders with vertical marker', () => {
        const testProductPart = {
            displaySwitchedOptions: initialState.displaySwitchedOptions,
            optionclassification: initialState.optionclassification,
            selectedOption: initialState.selectedOption,
            onSelect: initialState.onSelect,
            optionListVisible: true,
        };
        const tree = render(createProductPart(testProductPart));
        expect(tree).toMatchSnapshot();
    });
    it('renders with horizontal marker', () => {
        const testProductPart = {
            displaySwitchedOptions: initialState.displaySwitchedOptions,
            optionclassification: initialState.optionclassification,
            selectedOption: initialState.selectedOption,
            onSelect: initialState.onSelect,
            verticalMode: false,
            optionListVisible: true,
        };
        const tree = render(createProductPart(testProductPart));
        expect(tree).toMatchSnapshot();
    });
    it('onSelect is called after clicking over the component', () => {
        const mockedSelect = jest.fn();

        const testProductPart = {
            displaySwitchedOptions: initialState.displaySwitchedOptions,
            optionclassification: initialState.optionclassification,
            selectedOption: initialState.selectedOption2,
            onSelect: mockedSelect,
        };

        const tree = mount(createProductPart(testProductPart));
        tree.find('i').simulate('click');

        expect(mockedSelect).toHaveBeenCalled();
    });
});
