import {
    GridTable,
    GridTableColumnDefinition,
    Section,
} from '@theorchard/suite-components';
import type { GetCustomPaymentQuery } from 'src/apollo/queries/custom-payment/__generated__/get-custom-payment';
import React, { type PropsWithChildren } from 'react';
import {
    getAccountDetail,
    getContractDetail,
} from 'src/urls/frontend-royalties';
import { Link } from 'react-router-dom';
import {
    CustomPaymentDetailTableRowData,
    formatData,
    formatExportData,
} from 'src/components/custom-payment-detail/utils';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import { ColumnConfig } from 'src/types/table';
import { exportTableDataToCsv } from 'src/utils/export-csv';
import { formatDate } from '@theorchard/suite-frontend';
import { YYYY_MM_DD } from '@theorchard/accounting-apps-shared';

interface CustomPaymentTableProps {
    data?: GetCustomPaymentQuery;
}

const CLASS_NAME = 'CustomPaymentTable';
const TEST_ID = CLASS_NAME;

export const COLUMNS_DEFS: GridTableColumnDefinition<CustomPaymentDetailTableRowData>[] =
    [
        {
            name: 'accountId',
            title: 'Account ID',
            align: 'center',
            visibility: 'visible-locked',
            minWidth: '100px',
        },
        {
            name: 'accountName',
            title: 'Account Name',
            Cell: ({
                data: { accountId, accountName },
            }: PropsWithChildren<
                CellProps<CustomPaymentDetailTableRowData>
            >) => {
                return (
                    <Link key={accountId} to={getAccountDetail(accountId)}>
                        {accountName}
                    </Link>
                );
            },
            template: 'accountName',
        },
        {
            name: 'contractId',
            title: 'Contract ID',
            minWidth: '100px',
            align: 'right',
        },
        {
            name: 'contractName',
            title: 'Contract Name',
            Cell: ({
                data: { contractId, contractName },
            }: PropsWithChildren<
                CellProps<CustomPaymentDetailTableRowData>
            >) => (
                <Link to={getContractDetail(contractId)}>{contractName}</Link>
            ),
            template: 'contractName',
        },
        { name: 'paymentEntity', title: 'Payment Entity' },
        { name: 'payoneerProgramName', title: 'Program Name' },
        { name: 'payoneerProgramId', title: 'Program ID', align: 'right' },
        { name: 'accountPayeeId', title: 'Account Payee ID', align: 'right' },
        { name: 'currencyCode', title: 'Payment Currency', align: 'center' },
        { name: 'amount', title: 'Pre-Tax Amount', align: 'right' },
        { name: 'withholdingTaxAmount', title: 'WHT', align: 'right' },
        {
            name: 'withholdingTaxRate',
            title: 'WHT Rate',
            align: 'right',
            Cell: ({
                data: { withholdingTaxRate },
            }: PropsWithChildren<
                CellProps<CustomPaymentDetailTableRowData>
            >) => <>{withholdingTaxRate}%</>,
        },
        { name: 'vatAmount', title: 'VAT', align: 'right' },
        {
            name: 'vatRate',
            title: 'VAT Rate',
            align: 'right',
            Cell: ({
                data: { vatRate },
            }: PropsWithChildren<
                CellProps<CustomPaymentDetailTableRowData>
            >) => <>{vatRate}%</>,
        },
        {
            name: 'amountAfterWithholdingAndVat',
            title: 'Post-Tax Amount',
            align: 'right',
        },
        {
            name: 'activityStatementPeriod',
            title: 'Activity Statement Period',
            align: 'right',
        },
    ];

const CustomPaymentTable: React.FC<CustomPaymentTableProps> = ({ data }) => {
    const paymentName = data?.customPayment.paymentName || '';
    const createdAt = data?.customPayment.createdAt || '';
    const fileName = `${paymentName}-${formatDate(createdAt, YYYY_MM_DD)}-Custom-Payment.csv`;
    const tableData: CustomPaymentDetailTableRowData[] = formatData(data);
    const hasData = tableData.length > 0;

    const onExport = (columns: ColumnConfig[]) => {
        exportTableDataToCsv(
            formatExportData(data),
            fileName,
            columns,
            COLUMNS_DEFS
        );
    };

    const gridTableProps = {
        onExport,
        name: CLASS_NAME,
        className: CLASS_NAME,
        testId: TEST_ID,
        columnDefs: COLUMNS_DEFS,
        data: tableData,
        paginationText: hasData ? `${tableData.length} Items` : undefined,
        variant: 'zebra' as const,
        rowKey: 'accountId',
        exportable: hasData,
        customizable: hasData,
        bordered: true,
        stickyHeader: true,
        shadowed: true,
    };

    return (
        <Section>
            <Section.Body>
                <Section.Table>
                    <GridTable {...gridTableProps} />
                </Section.Table>
            </Section.Body>
        </Section>
    );
};

export default CustomPaymentTable;