import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import AccountNameDropdown from 'src/pages/songPage/components/accountNameDropdown';
import { DropDownAccountItem } from 'src/pages/songPage/components/accountNameDropdown/accountNameDropdown';

describe('<AccountNameDropdown>', () => {
    const accountsData = [
        {
            name: 'Account A',
            id: '1',
        },
        {
            name: 'Account B',
            id: '2',
        },
    ];
    const onChange = jest.fn();

    const renderComponent = (
        accountItems: DropDownAccountItem[],
        selectedAccount?: string
    ) =>
        renderInAppContext(
            <AccountNameDropdown
                onChange={onChange}
                accounts={accountItems}
                selectedAccount={selectedAccount}
                loading={false}
                placeholder="Account Name"
            />
        );

    describe('when account list is passed to drop down', () => {
        test('renders default account option', () => {
            const { getByText } = renderComponent(accountsData);
            expect(getByText('Account Name')).toBeVisible();
        });

        test('renders all accounts', () => {
            const { getByText, container } = renderComponent(accountsData);

            const indicator = container.querySelector('.Select__indicator');
            if (indicator) fireEvent.mouseDown(indicator);
            expect(
                container.querySelectorAll('.Select__menu .Select__option')
            ).toHaveLength(accountsData.length);
            accountsData.forEach(account => {
                expect(getByText(account.name)).toBeVisible();
            });
        });

        test('calls onChange if item changed', () => {
            const { getByText, container } = renderComponent(accountsData);
            const input = container.querySelector('input');

            if (input)
                fireEvent.change(input, { target: { value: 'Account A' } });

            fireEvent.click(getByText('Account A'));

            expect(onChange).toHaveBeenCalledWith('1');
        });

        test('filters items based on search term', () => {
            const { queryByText, container } = renderComponent(accountsData);

            const input = container.querySelector('input');
            const indicator = container.querySelector('.Select__indicator');
            if (input && indicator) {
                fireEvent.mouseDown(indicator);
                fireEvent.change(input, { target: { value: 'Account A' } });
            }
            expect(queryByText('Account A')).toBeVisible();
            expect(
                container.querySelectorAll('.Select__menu .Select__option')
            ).toHaveLength(1);
        });

        test('renders with pre-selected country', () => {
            const { getByText } = renderComponent(accountsData, '1');
            expect(getByText('Account A')).toBeVisible();
        });

        test('returns deduped list when duplicate accounts', () => {
            const dupeAccountData = [
                {
                    name: 'Account A',
                    id: '1',
                },
                {
                    name: 'Account B',
                    id: '2',
                },
                {
                    name: 'Account A',
                    id: '1',
                },
            ];
            const { container } = renderComponent(dupeAccountData);
            const indicator = container.querySelector('.Select__indicator');
            if (indicator) fireEvent.mouseDown(indicator);
            expect(
                container.querySelectorAll('.Select__menu .Select__option')
            ).toHaveLength(2);
        });
    });
});