import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    ContractTypesDropdown,
    ContractTypesDropdownPropTypes,
} from 'src/components/shared/contract-types-dropdown';

describe('<ContractTypesDropdown> layout', () => {
    const defaultProps: ContractTypesDropdownPropTypes = {
        id: 'contractType',
        onChange: jest.fn(),
        placeholder: 'Contract Type',
        testId: 'contractType',
        value: '',
    };

    const renderComponent = (
        props: ContractTypesDropdownPropTypes = defaultProps
    ) => renderInAppContext(<ContractTypesDropdown {...props} />);

    it('renders with specified placeholder', () => {
        renderComponent();
        expect(screen.getByText('Contract Type')).toBeDefined();
    });

    it('renders selected contract type', () => {
        const props = { ...defaultProps, value: 'distribution' };
        renderComponent(props);
        expect(screen.getByText('Distribution')).toBeDefined();
        expect(screen.queryByText('Legacy Distribution')).toBeNull();
        expect(screen.queryByText('Performer Neighbouring Rights')).toBeNull();
    });

    it('shows all contract type options', () => {
        renderComponent();

        const selectButton = screen.getByRole('button');
        fireEvent.click(selectButton);

        expect(screen.getByText('Distribution')).toBeDefined();
        expect(screen.getByText('Legacy Distribution')).toBeDefined();
        expect(screen.getByText('Performer Neighbouring Rights')).toBeDefined();
    });

    it('removed options from contract type', () => {
        const props = {
            ...defaultProps,
            removeOptions: ['legacy_distribution'],
        };

        renderComponent(props);
        const selectButton = screen.getByRole('button');
        fireEvent.click(selectButton);

        expect(screen.getByText('Distribution')).toBeDefined();
        expect(screen.queryByText('Legacy Distribution')).toBeNull();
        expect(screen.getByText('Performer Neighbouring Rights')).toBeDefined();
    });

    it('renders disabled when specified', () => {
        renderComponent({ ...defaultProps, isDisabled: true });

        const contractTypeSelect = screen.getByTestId('SuiteSelectInput');
        expect(contractTypeSelect.className).toContain('disabled');
    });

    it('renders close/clear glyph when specified', () => {
        renderComponent({
            ...defaultProps,
            isClearable: true,
            value: 'distribution',
        });

        expect(screen.getByText('Distribution')).toBeDefined();
        const closeIcon = screen.getByTestId('ClearGlyphIcon');
        expect(closeIcon).toBeDefined();
    });
});