import React from 'react';
import {
    GridTable,
    GridTableColumnDefinition,
    Section,
} from '@theorchard/suite-components';
import { AppIcon, BrandIcon, Illustration } from '@theorchard/suite-icons';
import { Link } from 'react-router-dom';
import { Link as ExternalApplicationLink } from 'src/components/shared/link';
import {
    ADJUST_FILTERS_MSG,
    DEFAULT_ITEMS_PER_PAGE,
    DEFAULT_NO_RESULTS_MSG,
    SEARCH_NO_RESULTS_FOUND,
} from 'src/constants';
import { getAccountDetail as abacusAccountDetail } from 'src/urls/frontend-royalties';
import { getAccountDetail as moneyhubAccountDetail } from 'src/urls/externals/moneyhub';
import { getAccountDetail as oaAccountDetail } from 'src/urls/externals/oa';
import type { AbacusAccountList } from 'src/types/abacus-account';
import AccountIcon from '../account-detail/account-icon';

const ACCOUNT_TABLE_HEADERS: GridTableColumnDefinition[] = [
    {
        name: 'accountName',
        template: 'accountName',
        title: 'Account Name',
        Cell: ({ data: { accountId, accountName, brandName } }: any) => (
            <>
                <AccountIcon
                    brandName={brandName}
                    testId="accountTableBrandIcon"
                />
                <Link key={accountId} to={abacusAccountDetail(accountId)}>
                    {accountName}
                </Link>
            </>
        ),
    },
    {
        name: 'accountId',
        title: 'Account ID',
    },
    {
        name: 'contractsCount',
        template: 'contractsCount',
        title: '# of Contracts',
        Cell: ({ data: { accountId, contractsCount } }: any) => (
            <Link
                key={accountId}
                to={abacusAccountDetail(accountId).concat(
                    '?selectTab=contracts'
                )}
            >
                {contractsCount}
            </Link>
        ),
    },
    {
        name: 'viewInApplication',
        template: 'viewInApplication',
        title: 'View in Application',
        align: 'right',
        Cell: ({ data: { accountId } }: any) => (
            <div className="AccountList-applicationcell">
                <ExternalApplicationLink
                    icon={<BrandIcon brand="orchard" />}
                    isExternal={true}
                    label="OA"
                    url={oaAccountDetail(accountId)}
                    data-testid={`oaExternalApplicationLink${accountId}`}
                />
                <ExternalApplicationLink
                    icon={<AppIcon app="moneyhub" />}
                    isExternal={true}
                    label="Accounting"
                    url={moneyhubAccountDetail(accountId)}
                    data-testid={`moneyhubExternalApplicationLink${accountId}`}
                />
            </div>
        ),
    },
];

export interface AccountTablePropTypes {
    accountList: AbacusAccountList[] | [];
    isFiltered: boolean;
    isLoading: boolean;
    renderPagination: any;
}

export const AccountTable: React.FC<AccountTablePropTypes> = ({
    accountList,
    isFiltered,
    isLoading,
    renderPagination,
}) => {
    const gridTableVariant = 'zebra' as const;

    const gridTableProps = {
        name: 'Account',
        variant: gridTableVariant,
        header: renderPagination(),
        data: isLoading ? [] : accountList,
        rowKey: 'accountId',
        bordered: true,
        loading: isLoading,
        emptyStateIcon: <Illustration name="noResults" />,
        emptyStateTitle: isFiltered
            ? SEARCH_NO_RESULTS_FOUND
            : DEFAULT_NO_RESULTS_MSG,
        emptyStateBody: isFiltered ? ADJUST_FILTERS_MSG : '',
        columnDefs: ACCOUNT_TABLE_HEADERS,
        loadingRows: DEFAULT_ITEMS_PER_PAGE,
        stickyHeader: true,
        shadowed: true,
    };

    return (
        <Section>
            <Section.Body testId="sectionBody">
                <Section.Table testId="sectionTable">
                    <GridTable {...gridTableProps} />
                </Section.Table>
            </Section.Body>
        </Section>
    );
};

export default AccountTable;