import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMergedProduct } from 'lib/mockProductData';
import { getMockReviewQueueItemData } from 'lib/test/mocks/mockreviewQueueItemData';
import * as reviewQueueItemQuery from 'src/data/queries/reviewQueueItem/reviewQueueItem';
import ProductNoteBlock, {
    Props,
    CLASS_NAME,
} from 'src/pages/productModal/components/productNoteBlock/productNoteBlock';
import type { ReviewQueueItem } from 'src/data/queries/reviewQueueItem/types';

describe('ProductNoteBlock', () => {
    const defaultProps = {
        reviewQueueId: 1,
        product: getMergedProduct(),
    };
    afterEach(() => jest.resetAllMocks());

    const renderComponent = (
        customProps?: Partial<Props>,
        partialItemFields?: Partial<ReviewQueueItem>
    ) => {
        const mockItem = getMockReviewQueueItemData(partialItemFields);
        jest.spyOn(
            reviewQueueItemQuery,
            'useReviewQueueItemQuery'
        ).mockImplementation(() => ({
            loading: false,
            error: undefined,
            data: mockItem,
        }));

        return renderInAppContext(
            <ProductNoteBlock {...defaultProps} {...customProps} />
        );
    };

    test('does not render without notes', () => {
        const { queryByTestId } = renderComponent(undefined, {
            queueName: 'initial',
            movedAtDatetime: null,
            moveNote: null,
        });
        const productNoteBlockEl = queryByTestId(CLASS_NAME);
        expect(productNoteBlockEl).toBeNull();
    });

    test('does not render bulk submitted note if the submittedProductsCount < 2', () => {
        const mockProduct = getMergedProduct();
        mockProduct.bulkSession = { id: 'abc-1', submittedProductsCount: 1 };
        const { queryByTestId } = renderComponent({ product: mockProduct });
        expect(
            queryByTestId('bulkSession-contextAlertTitle')
        ).not.toBeInTheDocument();
    });

    test('renders context notes', () => {
        const mockProduct = getMergedProduct();
        mockProduct.label.accountReviewContext.setCurrent('foo');
        mockProduct.label.subaccountReviewContext.setCurrent('bar');
        mockProduct.bulkSession = { id: 'abc-1', submittedProductsCount: 2 };
        const { getByTestId } = renderComponent({ product: mockProduct });
        expect(getByTestId('account-contextAlertTitle')).toBeInTheDocument();
        expect(getByTestId('subaccount-contextAlertTitle')).toBeInTheDocument();
        expect(
            getByTestId('bulkSession-contextAlertTitle')
        ).toBeInTheDocument();
    });
});