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

beforeEach(cleanup);

describe('Drop Down Drawer', () => {
    test('01 - List of options with one selected and highlighted chunk displays all the options', () => {
        const highlightedChunk = 'c';
        const options = [
            'Cleveland',
            'Chicago',
            'Indianapolis',
            'Los Angeles',
            'Milwaukee',
            'New York',
            'San Francisco'
        ];
        const wrapper = shallow(<DropDownDrawer
            emptyStateMessage={'There are no values'}
            highlightedChunk={highlightedChunk}
            selectedOption={1}
            onSelectOption={(option: { toString: () => string }) => { }}
            options={options}
        />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-drawer-container').length).toBe(1);
        expect(wrapper.find('.drop-down-drawer-list').length).toBe(1);
        expect(wrapper.find(DropDownEmptyState).length).toBe(0);

        const dropDownItemComponents = wrapper.find(DropDownItem);
        expect(dropDownItemComponents.length).toBe(7);
        dropDownItemComponents.map((item, index) => {
            const itemProps = item.props();
            expect(itemProps.focused).toBe(index === 1);
            expect(itemProps.highlightedChunk).toBe(highlightedChunk);
            expect(itemProps.value).toBe(options[index]);
        });
    });
    test('02 - List of options empty displays the empty message', () => {
        const emptyStateMessage = 'There are no values';
        const wrapper = shallow(<DropDownDrawer
            emptyStateMessage={emptyStateMessage}
            selectedOption={1}
            onSelectOption={(option: { toString: () => string }) => { }}
            options={[]}
        />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-drawer-container').length).toBe(1);
        expect(wrapper.find('.drop-down-drawer-list').length).toBe(0);
        expect(wrapper.find(DropDownItem).length).toBe(0);

        const emptyStateComponent = wrapper.find(DropDownEmptyState);
        expect(emptyStateComponent.length).toBe(1);
        expect(emptyStateComponent.props().message).toBe(emptyStateMessage);
    });
});