import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import storeList from 'src/__fixtures__/graphql/store-list-response.json';
import {
    ServiceMultiSelect,
    ServiceMultiSelectPropTypes,
} from 'src/components/shared/service-multiselect';
import type { GetStoresQuery } from 'src/apollo/queries/__generated__/stores';

type Stores = NonNullable<GetStoresQuery['deliveryStoresV2']['items']>;

describe('<ServiceMultiSelect>', () => {
    const render = (props: ServiceMultiSelectPropTypes) =>
        renderInAppContext(<ServiceMultiSelect {...props} />);

    const services = (storeList.deliveryStoresV2.items as Stores).map(
        ({ id, name }: Stores[0]) => ({
            label: name,
            value: `${id}`,
        })
    );

    const props = {
        className: 'service',
        onChange: jest.fn(),
        placeholder: 'All',
        selectedValue: '',
        services,
    };

    afterEach(jest.restoreAllMocks);

    it('renders <ServiceMultiSelect>', () => {
        render(props);
        expect(screen.getByText('All')).toBeDefined();
    });

    it('displays dropdown options', async () => {
        const { container } = render(props);
        fireEvent.click(screen.getByRole('combobox', { hidden: true }));
        await screen.findByTestId('SuiteListView');
        const options = container.getElementsByClassName(
            'SuiteListView-option'
        );
        expect(options).toHaveLength(
            storeList['deliveryStoresV2']['items'].length
        );
        expect(screen.getByText('121 Music')).toBeDefined();
        expect(screen.getByText('Spotify')).toBeDefined();
    });

    it('shows selected service option', () => {
        render({ ...props, selectedValue: ['1', '2'] });
        expect(screen.getByText('121 Music')).toBeDefined();
        expect(screen.getByText('Spotify')).toBeDefined();
    });
});