import { fireEvent, screen } from '@testing-library/react';

export const SUITE_MULTI_SELECT_TEST_ID = 'SuiteMultiSelect';
export const SUITE_SELECT_TEST_ID = 'SuiteSelect';
export const SUITE_FILTER_INPUT = 'SuiteListViewFilterInput';

interface Option {
    label: string;
}

export const openSelect = async (testId = 'SuiteSelect') => {
    const select = screen.getByTestId(testId);
    const input = getInput(testId);
    fireEvent.click(input);

    await screen.findByTestId('SuiteListView');
    return select;
};

export const getInput = (selectTestId?: string) => {
    if (selectTestId)
        return screen
            .getByTestId(selectTestId)
            .querySelector('input[role="combobox"]') as HTMLInputElement;

    return screen.getByRole('combobox', { hidden: true }) as HTMLInputElement;
};

export const getOption = (option: Option) => {
    const element = screen.getByText(option.label!, {
        selector: '.SuiteListView .SuiteListView-option-label',
    });

    return element.closest('.SuiteListView-option')!;
};

const getStatusOption = (option: Option) => {
    const element = screen.getByText(option.label!, {
        selector: '.SuiteListView .Status-text',
    });

    return element.closest('.SuiteListView-option')!;
};

export const selectOption = (option: Option) => {
    const row = getOption(option);
    fireEvent.click(row);
    return row;
};

export const selectStatusOption = (option: Option) => {
    const row = getStatusOption(option);
    fireEvent.click(row);
    return row;
};

export const queryOption = (option: Option) => {
    const element = screen.queryByText(option.label!, {
        selector: '.SuiteListView .SuiteListView-option-label',
    });

    return element?.closest('.SuiteListView-option') ?? null;
};

const getFilterInput = () => {
    return screen.getByTestId('SuiteListViewFilterInput');
};

export const triggerFilterChange = (value?: string) => {
    fireEvent.change(getFilterInput(), { target: { value } });
};

export const queryInputTag = (option: Option) => {
    return (
        screen
            .queryByText(option.label!, {
                selector:
                    '.SuiteSelect-input .SuiteSelect-input-multi-value-tag .TruncatedText-inner',
            })
            ?.closest('.SuiteSelect-input-multi-value-tag') ?? null
    );
};

// deprecated Dropdown utils
export const deprecatedGetOption = (option: Option) => {
    return screen.getByText(option.label!, {
        selector: '.Select__menu-list .Select__option > div',
    });
};

export const deprecatedSelectOption = (option: Option) => {
    const row = deprecatedGetOption(option);
    fireEvent.click(row);
    return row;
};