import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ArtworkValidationPill from '../artworkValidationPill';
import type { ArtworkComplianceMatch } from 'src/data/queries/product/types';
import type { MergedProduct } from 'src/product/product';

const mockArtworkComplianceMatches: ArtworkComplianceMatch[] = [
    {
        metadata_field: 'artist_name',
        metadata_value: 'The Beatles',
        fuzzy_matches_found: ['The Beet les', 'Beatles'],
    },
    {
        metadata_field: 'album_title',
        metadata_value: 'Abbey Road',
        fuzzy_matches_found: ['Abbey Rd'],
    },
];

const createMockProduct = (
    artworkCompliance: ArtworkComplianceMatch[] | null
) =>
    ({
        basics: {
            artworkCompliance,
        },
    } as unknown as MergedProduct);

describe('<ArtworkValidationPill>', () => {
    test('renders nothing when artworkCompliance is null', () => {
        const product = createMockProduct(null);
        const { container } = renderInAppContext(
            <ArtworkValidationPill product={product} />
        );

        expect(container).toBeEmptyDOMElement();
    });

    test('renders nothing when artworkCompliance is undefined', () => {
        const product = createMockProduct(null);
        const { container } = renderInAppContext(
            <ArtworkValidationPill product={product} />
        );

        expect(container).toBeEmptyDOMElement();
    });

    test('renders warning Pill when artworkCompliance has matches', () => {
        const product = createMockProduct(mockArtworkComplianceMatches);
        const { getByTestId } = renderInAppContext(
            <ArtworkValidationPill product={product} />
        );

        expect(getByTestId('artwork-validation-pill')).toBeInTheDocument();
    });

    test('renders Pill with warning variant and warning icon', () => {
        const product = createMockProduct(mockArtworkComplianceMatches);
        const { getByTestId } = renderInAppContext(
            <ArtworkValidationPill product={product} />
        );
        const pill = getByTestId('artwork-validation-pill');

        expect(pill).toBeInTheDocument();
        expect(pill.classList.contains('ArtworkValidationPill')).toBe(true);
    });

    test('should not render when artworkCompliance is an empty array', () => {
        const product = createMockProduct([]);
        const { queryByTestId } = renderInAppContext(
            <ArtworkValidationPill product={product} />
        );

        expect(
            queryByTestId('artwork-validation-pill')
        ).not.toBeInTheDocument();
    });
});