import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    AccountTable,
    AccountTablePropTypes,
} from 'src/components/account-list/account-table';
import { getAccountDetail as oaAccountDetail } from 'src/urls/externals/oa';
import { getAccountDetail as moneyhubAccountDetail } from 'src/urls/externals/moneyhub';
import type { AbacusAccountList } from 'src/types/abacus-account';

describe('<AccountTable>', () => {
    const render = (props: AccountTablePropTypes) =>
        renderInAppContext(<AccountTable {...props} />);

    const accounts: AbacusAccountList[] = [
        {
            accountId: '1',
            accountName: 'Test Account 1',
            brandName: 'theorchard',
            contractsCount: 1,
        },
        {
            accountId: '2',
            accountName: 'Test Account 2',
            brandName: 'awal',
            contractsCount: 2,
        },
    ];
    const props: AccountTablePropTypes = {
        accountList: accounts,
        isFiltered: false,
        isLoading: false,
        renderPagination: jest.fn(),
    };

    it('renders a table with headers', () => {
        render(props);
        const expectedTableHeaders: string[] = [
            'Account Name',
            'Account ID',
            '# of Contracts',
        ];
        expectedTableHeaders.forEach((header: string) => {
            expect(screen.getAllByText(header)).toBeDefined();
        });
    });

    it('renders a list of accounts', () => {
        render(props);
        const bodyText: any = [];
        document
            .querySelectorAll('div.GridTable-cell')
            .forEach((body: any) => bodyText.push(body.textContent));
        expect(bodyText).toEqual([
            'Test Account 1',
            '1',
            '1',
            'OAAccounting',
            'Test Account 2',
            '2',
            '2',
            'OAAccounting',
        ]);
    });

    it('renders links', () => {
        render(props);

        const links: HTMLElement[] = screen.getAllByRole('link');
        console.log('LINKS', links);
        expect(links[0].getAttribute('href')).toContain(
            `/account/${accounts[0]['accountId']}`
        );
        expect(links[1].getAttribute('href')).toContain(
            `/account/${accounts[0]['accountId']}?selectTab=contracts`
        );
        expect(links[2].getAttribute('href')).toContain(
            `view_vendor.php?vendor_id=${accounts[0]['accountId']}`
        );
        expect(links[3].getAttribute('href')).toContain(
            `/account/${accounts[0].accountId}/highlights/overview`
        );
        expect(links[4].getAttribute('href')).toContain(
            `/account/${accounts[1]['accountId']}`
        );
        expect(links[5].getAttribute('href')).toContain(
            `/account/${accounts[1]['accountId']}?selectTab=contracts`
        );
        expect(links[6].getAttribute('href')).toContain(
            `view_vendor.php?vendor_id=${accounts[1]['accountId']}`
        );
        expect(links[7].getAttribute('href')).toContain(
            `/account/${accounts[1].accountId}/highlights/overview`
        );
    });

    it('renders the table with the zebra variant style', () => {
        render(props);
        const table: Element | null = screen.getByTestId('GridTable');
        expect(table).toHaveClass('zebra-variant');
    });

    it('renders the new "View in Application" table header', () => {
        render(props);
        const expectedTableHeaders: string[] = [
            'Account Name',
            'Account ID',
            '# of Contracts',
            'View in Application',
        ];
        expectedTableHeaders.forEach((header: string) => {
            expect(screen.getAllByText(header)).toBeDefined();
        });
    });

    it('renders the "View in Application" links and their corresponding icon', () => {
        render(props);

        accounts.forEach((account: AbacusAccountList) => {
            const oaLink: HTMLElement = screen.getByTestId(
                `oaExternalApplicationLink${account.accountId}`
            );
            expect(oaLink).toHaveAttribute(
                'href',
                oaAccountDetail(account.accountId)
            );
            const orchardIcon: Element | null = oaLink.querySelector(
                `[data-testid="OrchardBrandIcon"]`
            );
            expect(orchardIcon).toBeInTheDocument();

            const moneyhubLink: HTMLElement = screen.getByTestId(
                `moneyhubExternalApplicationLink${account.accountId}`
            );
            expect(moneyhubLink).toHaveAttribute(
                'href',
                moneyhubAccountDetail(account.accountId)
            );
            const moneyhubIcon: Element | null = moneyhubLink.querySelector(
                `[data-testid="MoneyhubAppIcon"]`
            );
            expect(moneyhubIcon).toBeInTheDocument();
        });
    });

    it('renders brandIcons', () => {
        render(props);
        const brandIcons = screen.getAllByTestId('accountTableBrandIcon');
        expect(brandIcons[0].getAttribute('alt')).toContain('brands/orchard');
        expect(brandIcons[1].getAttribute('alt')).toContain('brands/awal');
    });
});