import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    OwnershipNrProductContentType,
    OwnershipNrTrackRecordingType,
} from 'src/data/globalTypes';
import { CatalogOwnershipNrSoundRecording } from 'src/data/queries';
import CatalogTable, { CLASSNAME } from '../catalogTable';

const soundRecordingData: CatalogOwnershipNrSoundRecording = {
    id: '48b8c55d-0f6e-4f8b-a850-6b6f75707492',
    instancesCount: 1,
    isrc: 'FRZ139680090',
    lastModifiedAt: '2023-08-02T10:54:15.864Z',
    primaryArtists: [
        {
            id: 'd82f2e72-3f26-4b66-ae10-591ef5f0f1f2',
            name: 'Uliana Kot',
        },
    ],
    recordingTitle: 'UKRAINE: Oh, thou with the curly locks, do not leave me',
    srNameVersion: 'UKRAINE: Oh, thou with the curly locks, do not leave me',
    version: null,
    tracks: [
        {
            id: '892a331f-e98b-44c5-a34b-1d23427f3564',
            title: 'UKRAINE: Oh, thou with the curly locks, do not leave me',
            recordingType: 'AUDIO' as OwnershipNrTrackRecordingType,
            version: null,
            product: {
                contentType: 'DIGITAL' as OwnershipNrProductContentType,
                format: 'Album',
                upc: 'ABC123456',
            },
            submittedByVendor: {
                name: 'Test',
                owner: 'knr',
            },
            submittedBySubaccountId: 1234,
        },
        {
            id: '892a331f-e98b-44c5-a34b-1d23427f3567',
            title: 'UKRAINE: Oh, thou with the curly locks, do not leave me',
            recordingType: 'AUDIO' as OwnershipNrTrackRecordingType,
            version: 'Live',
            product: {
                contentType: 'DIGITAL' as OwnershipNrProductContentType,
                format: 'Single',
                upc: 'ABC123456',
            },
            submittedByVendor: {
                name: 'Test',
                owner: 'knr',
            },
            submittedBySubaccountId: 1234,
        },
    ],
};

describe('<CatalogTable>', () => {
    const sortData = jest.fn();
    const renderTable = (data: CatalogOwnershipNrSoundRecording[]) =>
        renderInAppContext(
            <CatalogTable
                loading={false}
                soundRecordings={data}
                totalSoundRecordings={1}
                onClearFilters={jest.fn()}
                onSort={sortData}
                sortBy={{ key: 'lastModifiedAt', direction: 'desc' }}
                filtersApplied={false}
                page={0}
                pageSize={20}
                handlePageChange={jest.fn()}
                handlePageSizeChange={jest.fn()}
            />
        );

    test('has classname', () => {
        const { container } = renderTable([soundRecordingData]);
        const classname = container.getElementsByClassName(CLASSNAME).item(0);

        expect(classname).toBeVisible();
    });

    test('renders default sorted column', () => {
        const { container } = renderTable([soundRecordingData]);
        const lastModCell = container
            .getElementsByClassName('cell-lastModifiedAt')
            .item(0);

        expect(lastModCell && lastModCell.classList).toContain('sorted');
    });

    test('renders total count of contributions', () => {
        const { container } = renderTable([soundRecordingData]);
        const contributionsCount = container.querySelector(
            '#SuitePaginationTooltip'
        );

        expect(contributionsCount).toBeVisible();
        expect(contributionsCount).toHaveTextContent('1');
    });

    test('formats lastModifiedAt date correctly', () => {
        const { container } = renderTable([soundRecordingData]);
        const lastModifiedAt = container
            .getElementsByClassName('cell-lastModifiedAt')
            .item(0);
        expect(lastModifiedAt).toHaveTextContent('02 Aug 2023');
    });

    test('renders expandable indicator', () => {
        const { container } = renderTable([soundRecordingData]);
        const expandedIndicator = container
            .getElementsByClassName('cell-expandable-row-indicator')
            .item(0);
        expect(expandedIndicator).toBeVisible();
    });
});