import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { ordersData } from 'lib/test/mockPhysicalDeliveryOrdersData';
import {
    PhysicalDeliveryOrderStatus,
    PhysicalDeliveryType,
} from 'src/data/globalTypes';
import { DeliveryOrders } from 'src/data/queries';
import OrdersTable, { CLASSNAME } from '../ordersTable';

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

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

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

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

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

    test('renders correct row', () => {
        const { container } = renderTable(ordersData.orders);
        const element = container
            .getElementsByClassName('cell-orderId')
            .item(0);
        expect(element).toHaveTextContent('53');
    });

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

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

    test('has outputFile column set to download link', () => {
        const updatedData = [
            {
                createdAt: '2022-04-12T09:15:49.257Z',
                createdBy: 'john smith',
                orderDeliveryStatus: PhysicalDeliveryOrderStatus.COMPLETE,
                deliveryType: PhysicalDeliveryType.NEW,
                lastUpdated: '2022-04-13T09:15:49.257Z',
                lastUpdatedBy: 'john smith',
                orderId: '53',
                outputFile: 'some_file.csv',
                store: 'Above Board',
                totalProducts: 10,
            },
        ];
        const { container } = renderTable(updatedData);
        const outputFile = container
            .getElementsByClassName('cell-outputFile')
            .item(0);
        expect(outputFile).toHaveTextContent('Download File');
    });

    test('has outputFile column set to generating', () => {
        const { container } = renderTable(ordersData.orders);
        const outputFile = container
            .getElementsByClassName('cell-outputFile')
            .item(0);
        expect(outputFile).toHaveTextContent('Generating...');
    });
});