import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import MoveItemsButton, {
    MoveItemsButtonPropType,
} from 'src/components/shared/swap-items/move-items-button';

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

    it('renders <MoveItemsButton> to move items to right', () => {
        const props = {
            forward: true,
            message: 'Not Delivering To',
            onClickMoveTo: jest.fn(),
            selectedCount: 2,
        };
        render(props);
        expect(screen.getByText('Move Selected (2) to')).toBeDefined();
        expect(screen.getByText('Not Delivering To')).toBeDefined();
        expect(screen.getAllByTestId('ChevronRightGlyphIcon')).toBeDefined();
    });

    it('renders <MoveItemsButton> to move items to left', () => {
        const props = {
            forward: false,
            message: 'Delivering To',
            onClickMoveTo: jest.fn(),
            selectedCount: 1,
        };
        render(props);
        expect(screen.getByText('Move Selected (1) to')).toBeDefined();
        expect(screen.getByText('Delivering To')).toBeDefined();
        expect(screen.getAllByTestId('ChevronLeftGlyphIcon')).toBeDefined();
    });

    it('handler is called on click of <MoveItemsButton>', () => {
        const props = {
            forward: false,
            message: 'Delivering To',
            onClickMoveTo: jest.fn(),
            selectedCount: 1,
        };
        render(props);
        const moveButton = screen.getByTestId('ItemList-MoveItemsButton');
        fireEvent.click(moveButton);
        expect(props.onClickMoveTo).toHaveBeenCalled();
    });

    it('disables <MoveItemsButton>', () => {
        const props = {
            forward: false,
            isDisabled: true,
            message: 'Delivering To',
            onClickMoveTo: jest.fn(),
            selectedCount: 1,
        };
        render(props);
        const moveButton = screen.getByTestId('ItemList-MoveItemsButton');
        expect(moveButton).toHaveClass('ItemList-ButtonDisable');
    });
});