import * as React from 'react';
import { shallow } from 'enzyme';
import { cleanup } from 'react-testing-library';
import 'jest-styled-components';
import DropDown from '../../../components/DropDown';
import { InputDropDownDrawer } from '../../../components/InputDropDownDrawer';
import AnimatedLabel from '../../../components/AnimatedLabel';

beforeEach(cleanup);

describe('Drop Down', () => {
    const animals = [
        { id: 1, toString: () => 'Bear' },
        { id: 2, toString: () => 'Bee' },
        { id: 3, toString: () => 'Cat' },
        { id: 4, toString: () => 'Dog' },
        { id: 5, toString: () => 'Elefant' },
        { id: 6, toString: () => 'Lion' },
        { id: 7, toString: () => 'Sea Lion' },
        { id: 8, toString: () => 'Shark' }
    ];

    test('01 - List of options with input does not show the dropdown', () => {
        const wrapper = shallow(<DropDown
            inputValue={'Elefant'}
            onSelectOption={() => { }}
            suggestOptions={animals}
        />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.state().showDropDown).toEqual(false);
    });

    test('02 - Click on the input will display the dropdown', () => {
        const onSelectOption = jest.fn();
        const wrapper = shallow(<DropDown
            inputValue={'Elefant'}
            onSelectOption={onSelectOption}
            suggestOptions={animals}
        />);

        wrapper.find(InputDropDownDrawer).prop('onDropDownEvent')({}, true);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.state().showDropDown).toEqual(true);
        expect(onSelectOption).not.toHaveBeenCalled();
    });

    test('03 - Select an option when the drop down is displayed will notify the new value', () => {
        const onSelectOption = jest.fn();
        const wrapper = shallow(<DropDown
            inputValue={'Elefant'}
            onSelectOption={onSelectOption}
            suggestOptions={animals}
        />);

        const selectedOption = 'Sea Lion';
        wrapper.find(InputDropDownDrawer).prop('onSelectOption')(selectedOption);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.state().showDropDown).toEqual(false);
        expect(onSelectOption).toHaveBeenCalledWith(selectedOption);
    });

    test('04 - Test to control props passed to child component', () => {
        const customEmptyStateMessage = <div>Custom test message</div>;
        const emptyStateMessage = 'Empty test message';
        const inputValue = 'Animal';
        const onEnterKeyPressed = jest.fn();
        const onSelectOption = jest.fn();
        const placeholder = 'Select animal';
        const showDropDownOnEmpty = true;
        const wrapper = shallow(<DropDown
            customEmptyStateMessage={customEmptyStateMessage}
            emptyStateMessage={emptyStateMessage}
            inputValue={inputValue}
            onSelectOption={onSelectOption}
            placeholder={placeholder}
            readOnly={false}
            showDropDownOnEmpty={showDropDownOnEmpty}
            suggestOptions={animals}
        />);

        expect(wrapper).toMatchSnapshot();

        const inputDropDownDrawerProps = wrapper.find(InputDropDownDrawer).props();
        expect(inputDropDownDrawerProps.customEmptyStateMessage).toBe(customEmptyStateMessage);
        expect(inputDropDownDrawerProps.emptyStateMessage).toBe(emptyStateMessage);
        expect(inputDropDownDrawerProps.highlightedChunk).toBeUndefined();
        expect(inputDropDownDrawerProps.inputValue).toBe(inputValue);
        expect(inputDropDownDrawerProps.onEnterKeyPressed).toBeUndefined();
        expect(inputDropDownDrawerProps.placeholder).toBe(placeholder);
        expect(inputDropDownDrawerProps.readOnly).toBe(true);
        expect(inputDropDownDrawerProps.showDropDown).toEqual(false);
        expect(inputDropDownDrawerProps.suggestOptions).toEqual(animals);
    });

    test('05 - Adding custom Input', () => {
        const onValueChange = jest.fn();
        const placeholdertext = "Headline"
        const wrapper = shallow(<DropDown
            customInput={AnimatedLabel}
            customInputProps={
                {
                    placeholder: placeholdertext,
                    value: this.state.value,
                    onValueChange: this.onValueChange
                }
            }
            inputValue={'Elefant'}
            onSelectOption={() => { }}
            suggestOptions={animals}
        />);

        wrapper.find(AnimatedLabel).prop('placeholder');
        const AnimatedLabelProps = wrapper.find(AnimatedLabel).props();
        expect(AnimatedLabelProps.placeholder).toBe(placeholdertext);
    });
});