/* eslint-env jest */
import React from 'react';
import noop from 'lodash/noop';
import { mount, render } from 'enzyme';
import ColorPalettes from './index';

const colorPalettes = {
    colorPalettes: [
        {
            identifier: 'default HKS_colors',
            colors: [
                {
                    identifier: 'red',
                    hex_value: '#FF0000',
                    title: 'red',
                },
                {
                    identifier: 'blue',
                    hex_value: '#0000FF',
                    title: 'blue',
                },
                {
                    identifier: 'black',
                    hex_value: '#000000',
                    title: 'black',
                },
            ],
            title: 'HKS',
        },
        {
            identifier: 'default Pantone_colors',
            colors: [
                {
                    identifier: 'red',
                    hex_value: '#FF0000',
                    title: 'red',
                },
                {
                    identifier: 'black',
                    hex_value: '#000000',
                    title: 'black',
                },
                {
                    identifier: 'white',
                    hex_value: '#FFFFFF',
                    title: 'white',
                },
                {
                    identifier: 'blue',
                    hex_value: '#0000FF',
                    title: 'blue',
                },
                {
                    identifier: 'green',
                    hex_value: '#00FF00',
                    title: 'green',
                },
            ],
            title: 'Pantone',
        },
        {
            identifier: 'default RAL_colors',
            colors: [
                {
                    identifier: 'red',
                    hex_value: '#FF0000',
                    title: 'red',
                },
                {
                    identifier: 'black',
                    hex_value: '#000000',
                    title: 'black',
                },
                {
                    identifier: 'white',
                    hex_value: '#FFFFFF',
                    title: 'white',
                },
                {
                    identifier: 'yellow',
                    hex_value: '#FFFF00',
                    title: 'yellow',
                },
                {
                    identifier: 'blue',
                    hex_value: '#0000FF',
                    title: 'blue',
                },
                {
                    identifier: 'green',
                    hex_value: '#00FF00',
                    title: 'green',
                },
                {
                    identifier: 'mint',
                    hex_value: '#BBDDAA',
                    title: 'mint',
                },
                {
                    identifier: 'violett',
                    hex_value: '#AAAAFF',
                    title: 'violett',
                },
                {
                    identifier: 'cyan',
                    hex_value: '#00FFFF',
                    title: 'cyan',
                },
                {
                    identifier: 'grey',
                    hex_value: '#eeeeee',
                    title: 'grey',
                },
            ],
            title: 'RAL',
        },
    ],
};
const color = {
    identifier: 'grey',
    hex_value: '#eeeeee',
    title: 'grey',
};

const usedColors = [{ hex_value: '000000', identifier: 'black', palette: 'default', value: 'rgb(0, 0, 0)' }];

it('renders correctly', () => {
    const tree = render(
        <ColorPalettes
            colorPalettes={colorPalettes.colorPalettes}
            colorPalette={'HKS'}
            selectedColor={color}
            colorSelectClick={noop}
            closeColorPalettes={noop}
        />
    );
    expect(tree).toMatchSnapshot();
});

it('renders a boxed component with the boxed prop', () => {
    const tree = render(
        <ColorPalettes
            width="xs"
            colorPalettes={colorPalettes.colorPalettes}
            colorPalette={'HKS'}
            selectedColor={color}
            colorSelectClick={noop}
            closeColorPalettes={noop}
            boxed
        />
    );
    expect(tree).toMatchSnapshot();
});

it('calls the colorSelectClick callback when the user changes the color', () => {
    const onChangeHandler = jest.fn();
    const tree = mount(
        <ColorPalettes
            width="xs"
            colorPalettes={colorPalettes.colorPalettes}
            colorPalette={'HKS'}
            customColor={''}
            selectedColor={color}
            colorSelectClick={onChangeHandler}
            closeColorPalettes={noop}
            usedColors={usedColors}
            palette={'default'}
        />
    );
    const input = tree.find('div[className^="ColorPalettes-usedColorWrapper"]');
    input.simulate('mousedown');
    expect(onChangeHandler).toHaveBeenCalled();
});
