import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ContributionItemList from 'src/components/schedule-form/contribution-item-list';

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

    const props = {
        itemList: [
            {
                label: '! (Take No) - Fibes, Oh Fibes!',
                value: 'd45a76bd-d868-4a3e-ba4d-75d4b2f203e1',
            },
            {
                label: '!franchesckarr! - Charli XCX',
                value: 'd9d53a58-d38c-40ca-aceb-613b0816a3f4',
            },
        ],
        searchInputName: 'Contributions',
        listType: 'unassignedContributions',
        itemMoveList: {},
        setItemMoveList: jest.fn(),
        totalCount: 2,
        isLoading: false,
        handleFetchMore: jest.fn(),
        filterCount: 2,
        offset: 0,
        contributionsOriginalCount: 2,
        setSelectAll: jest.fn(),
        setSelectedContainer: jest.fn(),
        isDisabled: false,
    };

    it('renders <ContributionItemList>', () => {
        render(props);
        expect(screen.getByText('Contributions (2 of 2)')).toBeDefined();
    });

    it('renders a list', () => {
        render(props);

        const checkboxes = screen.getAllByTestId(
            'ItemList-unassignedContributions-Checkbox'
        );
        expect(
            screen.getByText('! (Take No) - Fibes, Oh Fibes!')
        ).toBeDefined();
        expect(
            screen.getByText('d45a76bd-d868-4a3e-ba4d-75d4b2f203e1')
        ).toBeDefined();
        expect(screen.getByText('!franchesckarr! - Charli XCX')).toBeDefined();
        expect(
            screen.getByText('d9d53a58-d38c-40ca-aceb-613b0816a3f4')
        ).toBeDefined();
        expect(checkboxes.length).toEqual(2);
    });

    it('renders a checked list', () => {
        const newProps = {
            ...props,
            itemMoveList: {
                unassignedContributions: [
                    'd45a76bd-d868-4a3e-ba4d-75d4b2f203e1',
                ],
            },
        };
        render(newProps);
        expect(screen.getAllByRole('checkbox')[1]).toHaveAttribute('checked');
        expect(screen.getAllByRole('checkbox')[2]).not.toHaveAttribute(
            'checked'
        );
    });

    it('allows you to select all', () => {
        render(props);
        const checkbox = screen.getByTestId(
            'ItemList-unassignedContributions-Checkbox-All'
        );
        expect(checkbox).not.toHaveAttribute('checked');
        fireEvent.click(checkbox);
        expect(props.setSelectAll).toHaveBeenCalledWith(true);
        expect(props.handleFetchMore).toHaveBeenCalled();
        expect(props.setItemMoveList).toHaveBeenCalledWith({
            unassignedContributions: [
                'd45a76bd-d868-4a3e-ba4d-75d4b2f203e1',
                'd9d53a58-d38c-40ca-aceb-613b0816a3f4',
            ],
        });
    });

    it('allows you to deselect all', () => {
        const newProps = {
            ...props,
            itemMoveList: {
                unassignedContributions: [
                    'd45a76bd-d868-4a3e-ba4d-75d4b2f203e1',
                    'd9d53a58-d38c-40ca-aceb-613b0816a3f4',
                ],
            },
        };
        render(newProps);
        const checkbox = screen.getByTestId(
            'ItemList-unassignedContributions-Checkbox-All'
        );
        expect(checkbox).toHaveAttribute('checked');
        fireEvent.click(checkbox);
        expect(props.setSelectAll).toHaveBeenCalledWith(false);
        expect(props.setItemMoveList).toHaveBeenCalledWith({
            unassignedContributions: [],
        });
    });

    it('shows moving status', () => {
        const newProps = {
            ...props,
            movingTo: true,
            movingToMessage: 'test moving message',
        };
        render(newProps);
        expect(screen.getByText(newProps.movingToMessage)).toBeDefined();
        expect(screen.getByTestId('movingToSpinner')).toBeDefined();
    });

    it('disables checkboxes when "all" checkbox is selected', () => {
        const newProps = {
            ...props,
            isDisabled: true,
        };
        render(newProps);
        const checkboxes = screen.getAllByTestId(
            'ItemList-unassignedContributions-Checkbox'
        );
        expect(checkboxes[0]).toHaveAttribute('disabled');
    });
});