import type { PropsWithChildren } from 'react';
import React from 'react';
import { HiddenListCount } from 'src/components/shared/hidden-count';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { NrContractTermList } from 'src/types/contract-term';

const NrContractTermsTableColumns = () => {
    const NR_CONTRACT_TERMS_LIST_COLUMNS: GridTableColumnDefinition<NrContractTermList>[] =
        [
            {
                align: 'left',
                maxWidth: '3%',
                name: 'conditionRowNumber',
                title: '#',
                Cell: ({
                    data: { conditionRowNumber },
                }: PropsWithChildren<CellProps<NrContractTermList>>) => (
                    <div
                        className="ContractTermsConditions-gridTable-cell"
                        data-testid="id-cell"
                    >
                        {conditionRowNumber}
                    </div>
                ),
            },
            {
                maxWidth: '20.5%',
                name: 'termConditionName',
                title: 'Term Condition Name',
                Cell: ({
                    data: { termConditionName },
                }: PropsWithChildren<CellProps<NrContractTermList>>) => (
                    <div
                        className="ContractTermsConditions-gridTable-cell"
                        data-testid="termConditionName-cell"
                        style={{
                            whiteSpace: 'pre-wrap',
                        }}
                    >
                        {termConditionName}
                    </div>
                ),
            },
            {
                maxWidth: '22.5%',
                name: 'transactionType',
                title: 'Transaction Type',
                Cell: ({
                    data: { transactionType },
                }: PropsWithChildren<CellProps<NrContractTermList>>) =>
                    HiddenListCount({
                        items: transactionType,
                        maxVisibleItems: 10,
                        testId: 'transactionType-cell',
                    }),
            },
            {
                maxWidth: '22.5%',
                name: 'service',
                title: 'Service',
                Cell: ({
                    data: { service },
                }: PropsWithChildren<CellProps<NrContractTermList>>) =>
                    HiddenListCount({
                        items: service,
                        maxVisibleItems: 10,
                        testId: 'service-cell',
                    }),
            },
            {
                maxWidth: '22.5%',
                name: 'country',
                title: 'Country',
                Cell: ({
                    data: { country },
                }: PropsWithChildren<CellProps<NrContractTermList>>) =>
                    HiddenListCount({
                        items: country,
                        maxVisibleItems: 10,
                        testId: 'service-cell',
                    }),
            },
            {
                align: 'right',
                maxWidth: '9%',
                name: 'commission',
                title: 'Commission',
                Cell: ({
                    data: { commission },
                }: PropsWithChildren<CellProps<NrContractTermList>>) => (
                    <div
                        className="ContractTermsConditions-gridTable-cell"
                        data-testid="commission-cell"
                        style={{
                            whiteSpace: 'pre-wrap',
                        }}
                    >
                        {commission}%
                    </div>
                ),
            },
        ];

    return NR_CONTRACT_TERMS_LIST_COLUMNS;
};

export default NrContractTermsTableColumns;