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

const reducer = (state = {}, action) => {
    return { ...action, ...state };
};
const store = createStore(reducer, ['Use Redux']);

const translations = {
    imageNotAvailable: 'No preview available',
    details: 'Details',
    incompatibility: 'Incompatibility',
    notAvailable: 'Not avaiable',
    lateDelivery: 'Late delivery',
};

const createOption = (option, onClick = noop, onSelect = noop, props = {}) => (
    <Provider store={store}>
        <DefaultThemeProvider>
            <Option
                option={option}
                onClick={onClick}
                onSelect={onSelect}
                translations={translations}
                {...props}
            />
        </DefaultThemeProvider>
    </Provider>
);

describe('Option', () => {
    it('renders with an available image', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '/images/options/010002011000.png',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders without an available image', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with selectable amount', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: true,
            check_results: {
                status: true,
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with details', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            description: 'description',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with Incompatibility link', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            description: 'description',
            amount_is_selectable: false,
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with Not Available link', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            stock: {
                traffic_light: 'red',
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with Delay link', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            stock: {
                traffic_light: 'yellow',
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('renders with Option Group button', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            option_group: {
                children: [
                    { identifier: '1', title: 'Child 1' },
                    { identifier: '2', title: 'Child 2' },
                ],
                title: 'My group',
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
    it('onClick is called after clicking over the component', () => {
        const mockedClick = jest.fn();
        const mockedSelect = jest.fn(data => data);

        const testOption = {
            identifier: '010002011000',
            thumbnail: '010002011000',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };

        const tree = mount(createOption(testOption, mockedClick, mockedSelect));
        const selector = `div[data-option="${testOption.identifier}"]`;

        tree.find(selector).simulate('click');

        expect(mockedSelect).toHaveBeenCalled();
        expect(mockedClick).toHaveBeenCalled();
    });
    it('calls the render prop if provided', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '/images/options/010002011000.png',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };
        const tree = render(
            createOption(testOption, noop, noop, {
                render: () => <div>My option is completely custom</div>,
            })
        );
        expect(tree).toMatchSnapshot();
    });
    it('calls the children prop if provided', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '/images/options/010002011000.png',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            check_results: {
                status: true,
            },
        };
        const tree = render(
            createOption(testOption, noop, noop, {
                children: () => <div>My option content is custom</div>,
            })
        );
        expect(tree).toMatchSnapshot();
    });
    it('renders with TextInput', () => {
        const testOption = {
            identifier: '010002011000',
            thumbnail: '/images/options/010002011000.png',
            title: 'Argentina 1000',
            priceFormatted: '€ 123.00',
            amount_is_selectable: false,
            hasTextinput: true,
            inputText: null,
            check_results: {
                status: true,
            },
        };
        const tree = render(createOption(testOption));
        expect(tree).toMatchSnapshot();
    });
});
