import type { PropsWithChildren } from 'react';
import React from 'react';
import { amountFormatter } from 'src/utils/amount-helpers';
import { getCurrencyLabel } from 'src/utils/currency';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';

const HistoricalContractAdvanceListTableColumns = () => {
    const formatDate = (date: string | null | undefined) => {
        if (!date) return '-';
        return new Date(date).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
        });
    };

    const HISTORICAL_CONTRACT_ADVANCE_LIST_COLUMNS: GridTableColumnDefinition<unknown>[] =
        [
            {
                name: 'amount',
                title: 'Amount',
                align: 'left',
                fixed: true,
                Cell: ({
                    data: { amount, currency },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{amountFormatter(amount, currency)}</>
                ),
            },
            {
                name: 'currency',
                title: 'Currency',
                Cell: ({
                    data: { currency },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{getCurrencyLabel(currency)}</>
                ),
            },
            {
                name: 'description',
                title: 'Description',
                maxWidth: '300px',
                minWidth: '200px',
                Cell: ({ data }: CellProps<any>) => {
                    const description = data?.description;
                    if (!description) return <>-</>;

                    return (
                        <div
                            style={{
                                whiteSpace: 'pre-wrap',
                            }}
                        >
                            {description}
                        </div>
                    );
                },
            },
            {
                name: 'statementPeriodName',
                title: 'Statement Period',
                Cell: ({
                    data: { statementPeriod },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{statementPeriod?.statementPeriodName || '-'}</>
                ),
            },
            {
                name: 'datePaid',
                title: 'Date Paid',
                Cell: ({
                    data: { datePaid },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{formatDate(datePaid)}</>
                ),
            },
            {
                name: 'dueType',
                title: 'Due Type',
                Cell: ({
                    data: { dueType },
                }: PropsWithChildren<CellProps<any>>) => <>{dueType || '-'}</>,
            },
            {
                name: 'exchangeRate',
                title: 'Exchange Rate',
                align: 'left',
                Cell: ({
                    data: { exchangeRate },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>
                        {exchangeRate !== null && exchangeRate !== undefined
                            ? exchangeRate.toFixed(6)
                            : '-'}
                    </>
                ),
            },
        ];

    return HISTORICAL_CONTRACT_ADVANCE_LIST_COLUMNS;
};

export default HistoricalContractAdvanceListTableColumns;