/* eslint-env jest */
import React from 'react';
import { mount, render } from 'enzyme';
import AddGalleryImage from './index';
import ServiceLocator from 'App/ServiceLocator';

const tags = [
    {
        title: 'Sport',
        checked: false,
    },
    {
        title: 'Symbole',
        checked: true,
    },
    {
        title: 'Saison',
        checked: false,
    },
    {
        title: 'Branchen',
        checked: false,
    },
    {
        title: 'Bilder',
        checked: false,
    },
    {
        title: 'Männer',
        checked: false,
    },
    {
        title: 'Hintergründe',
        checked: false,
    },
    {
        title: 'Frauen',
        checked: false,
    },
    {
        title: 'Autos',
        checked: false,
    },
    {
        title: 'Figuren',
        checked: false,
    },
    {
        title: 'Geometrisch',
        checked: false,
    },
];

const images = [
    {
        url: './res/Kreis.jpg',
        title: 'Symbole',
        thumbnail: { isThumbnailBright: true },
    },
    {
        url: './res/Kreis.jpg',
        title: 'Branchen',
        thumbnail: { isThumbnailBright: false },
    },
    {
        url: './res/Rechteck.jpg',
        title: 'Männer',
    },
    {
        url: './res/Rechteck.jpg',
        title: 'Frauen',
    },
    {
        url: './res/Kreis.jpg',
        title: 'Figuren',
    },
    {
        url: './res/Kreis.jpg',
        title: 'Geometrisch1',
    },
    {
        url: './res/Stern.jpg',
        title: 'Figuren1',
    },
    {
        url: './res/Stern.jpg',
        title: 'Geometrisch',
    },
];

jest.mock('@material-ui/core/Dialog', () => {
    return {
        __esModule: true,
        // eslint-disable-next-line react/prop-types,react/display-name
        default: ({ children }) => {
            return <div>{children}</div>;
        },
    };
});

it('renders correctly', () => {
    const tree = render(
        <AddGalleryImage
            tags={tags}
            images={images}
            onClose={() => {}}
            onSelectImage={() => {}}
            onSelectTag={() => {}}
            open={true}
            width={'lg'}
        />
    );
    expect(tree).toMatchSnapshot();
});

it('calls the onSelectImage callback when the user uploads an own image in the Component', () => {
    const analyticsSrvc = new (class {
        static serviceName = 'AnalyticsService';
        triggerEvent = jest.fn();
    })();
    ServiceLocator.provide(analyticsSrvc);
    const onChangeHandler = jest.fn();
    const tree = mount(
        <AddGalleryImage
            tags={tags}
            images={images}
            onClose={() => {}}
            onSelectImage={onChangeHandler}
            onSelectTag={() => {}}
            open={true}
            width={'lg'}
        />
    );

    const button = tree.find('button').last();

    // check the disabled state, the callback should not be triggered
    button.simulate('click');
    expect(onChangeHandler).not.toHaveBeenCalled();

    // click the first image element to have a selected image in the internal state (so the button is enabled)
    tree.find('img')
        .first()
        .simulate('click');

    button.simulate('click');
    expect(onChangeHandler).toHaveBeenCalled();
});
