import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { ordersData } from 'lib/test/mockOwnershipDeliveryOrdersData';
import { OwnershipNrDeliveryOrderStatus } from 'src/data/globalTypes';
import { OwnershipDeliveryOrder } from 'src/data/queries';
import OrdersTable, { CLASS_NAME } from '../ordersTable';

describe('<OrdersTable>', () => {
    const sortData = jest.fn();
    const renderTable = (data: OwnershipDeliveryOrder[]) =>
        renderInAppContext(
            <OrdersTable
                loading={false}
                orders={data}
                totalCount={ordersData.totalCount}
                onClearFilters={jest.fn()}
                sortBy={{ key: 'createdAt', direction: 'desc' }}
                onSort={sortData}
                page={0}
                pageSize={20}
                handlePageChange={jest.fn()}
                handlePageSizeChange={jest.fn()}
                filtersApplied={false}
            />
        );

    test('has classname', () => {
        const { container } = renderTable(ordersData.items);
        const classname = container
            .getElementsByClassName(`${CLASS_NAME}-grid-table`)
            .item(0);

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

    test('renders total count of orders', () => {
        const { container } = renderTable(ordersData.items);
        const ordersCount = container.querySelector('#SuitePaginationTooltip');

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

    test('renders correct row', () => {
        const { container } = renderTable(ordersData.items);
        const element = container
            .getElementsByClassName(`${CLASS_NAME}-cell-orderId`)
            .item(1);
        expect(element).toHaveTextContent('55');
    });

    test('renders default sorted column', () => {
        const { container } = renderTable(ordersData.items);
        const createdAtCell = container
            .getElementsByClassName('cell-createdAt')
            .item(0);

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

    test('has downloadFileUrl column set to download link', () => {
        const updatedData = [
            {
                createdAt: '2022-04-12T09:15:49.257Z',
                createdBy: {
                    id: '1',
                    firstName: 'john',
                    lastName: 'smith',
                    email: 'john.smith@email.com',
                },
                status: OwnershipNrDeliveryOrderStatus.READY,
                lastUpdated: '2022-04-18T09:15:49.257Z',
                id: '55',
                jobCount: 0,
                cmm: {
                    id: '1676',
                    name: 'OFPS',
                    ownershipServices: [
                        {
                            territory: {
                                countryName: 'Slovenia',
                                territoryCodeA2: 'SI',
                            },
                        },
                        {
                            territory: {
                                countryName: 'Serbia',
                                territoryCodeA2: 'RS',
                            },
                        },
                    ],
                },
                downloadFileUrl: 'test2.zip',
                summary: { soundRecordingsProcessed: 5 },
                territory: 'SI',
            },
        ];
        const { container } = renderTable(updatedData);
        const downloadFileUrl = container
            .getElementsByClassName(`${CLASS_NAME}-cell-deliveryFileState`)
            .item(0);
        const cmmTerritoryCellValue = container
            .getElementsByClassName(`${CLASS_NAME}-cell-cmo`)
            .item(1);

        expect(downloadFileUrl).toHaveTextContent('Delivery File State');
        expect(cmmTerritoryCellValue).toHaveTextContent('OFPS Slovenia');
    });

    test('has downloadFileUrl column set to generating', () => {
        const { container } = renderTable(ordersData.items);
        const downloadFileUrl = container
            .getElementsByClassName(`${CLASS_NAME}-cell-deliveryFileState`)
            .item(1);
        expect(downloadFileUrl).toHaveTextContent('Generating Files');
    });

    test('has downloadFileUrl column set to ready', () => {
        const { container } = renderTable(ordersData.items);
        const downloadFileUrl = container
            .getElementsByClassName(`${CLASS_NAME}-cell-deliveryFileState`)
            .item(2);
        expect(downloadFileUrl).toHaveTextContent('Download Ready');
    });

    test('has status and downloadFileUrl column set to error', () => {
        const { container } = renderTable(ordersData.items);
        const downloadFileUrl = container
            .getElementsByClassName(`${CLASS_NAME}-cell-deliveryFileState`)
            .item(3);
        expect(downloadFileUrl).toHaveTextContent('Generation Error');
    });
});