import React from 'react';
import { render as renderDom } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { openSelect, getOption } from 'lib/test-utils/select';
import { HeaderSelect } from '../headerSelect';
import { HeaderSelectProps } from '../types';

describe('<HeaderSelect>', () => {
    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<HeaderSelectProps>) =>
        renderDom(<HeaderSelect options={options} {...props} />);

    testComponent(HeaderSelect, { options }, 'SuiteHeaderSelect');

    test('renders placeholder', () => {
        const placeholder = 'PLACEHOLDER TEXT';
        const { getByText } = render({ placeholder, options: [] });

        expect(getByText(placeholder)).toBeVisible();
    });

    test('renders dropdown with options', async () => {
        render();

        await openSelect('SuiteHeaderSelect');

        expect(getOption(option1)).toBeInTheDocument();
        expect(getOption(option2)).toBeInTheDocument();
    });

    test('renders option label with custom JSX', async () => {
        const { getByTestId, getByText } = render({
            options: [option1],
            components: {
                OptionLabel: ({ option }) => (
                    <div data-testid="CustomJSXOption">{option.label}</div>
                ),
            },
        });

        await openSelect('SuiteHeaderSelect');

        expect(getByTestId('CustomJSXOption')).toBeInTheDocument();
        expect(getByText('Option1')).toBeInTheDocument();
    });
});