import React from 'react';
import { fireEvent, render as renderDom } from '@testing-library/react';
import { formatMessage } from '@theorchard/suite-i18n';
import { testComponent } from 'lib/test-utils/common';
import { DropdownCreatable } from '../dropdownCreatable';
import { DropdownCreatableProps } from '../types';

describe('<DropdownCreatable>', () => {
    const name = 'country';
    const option1 = { label: 'Option1', value: '1', data: { id: 1 } };
    const option2 = { label: 'Option2', value: '2', data: { id: 2 } };
    const options = [option1, option2];

    const render = (props?: Partial<DropdownCreatableProps>) =>
        renderDom(<DropdownCreatable name={name} options={options} {...props} />);

    testComponent(DropdownCreatable);

    test('renders dropdown with items', () => {
        const { container, getByText } = render();
        const input = container.getElementsByTagName('input').item(0);

        if (input) fireEvent.mouseDown(input);

        options.forEach((option) => expect(getByText(option.label)).toBeVisible());
    });

    test('renders "create new" option on no match', () => {
        const { container, getByText } = render();
        const input = container.getElementsByTagName('input').item(0);
        const value = 'xxx';

        fireEvent.change(input!, { target: { value } });

        const newOptionElement = getByText(formatMessage('create_new', { value }));

        expect(newOptionElement).toBeInTheDocument();
    });
});