import type { PropsWithChildren } from 'react';
import React from 'react';
import { isEmpty } from 'lodash-es';
import { EditableDisplayNameCell } from 'src/components/reference-sap-profit-center-edit/editable-display-name-cell';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { GetReferenceSapProfitCentersQuery } from 'src/apollo/queries/reference-sap-profit-center/__generated__/get-reference-sap-profit-centers';

type AbacusSigningEntity = NonNullable<
    NonNullable<
        GetReferenceSapProfitCentersQuery['abacusReferenceSapProfitCenterList']['items'][number]
    >['signingEntities']
>[number];

export const ReferenceSapProfitCentersListColumns = () => {
    const REFERENCE_SAP_PROFIT_CENTERS_LIST_COLUMNS: GridTableColumnDefinition<unknown>[] =
        [
            {
                name: 'profitCenter',
                title: 'Profit Center',
                minWidth: '230px',
                maxWidth: '230px',
                Cell: ({
                    data: { profitCenter },
                }: PropsWithChildren<CellProps<any>>) => <>{profitCenter}</>,
            },
            {
                name: 'displayName',
                title: 'Display Name',
                minWidth: '400px',
                maxWidth: '400px',
                Cell: ({
                    data: { displayName, referenceSapProfitCenterId },
                }: PropsWithChildren<CellProps<any>>) => (
                    <EditableDisplayNameCell
                        rowData={{
                            referenceSapProfitCenterId:
                                referenceSapProfitCenterId,
                            displayName: displayName,
                        }}
                    />
                ),
            },
            {
                name: 'companyCode',
                title: 'Company Code',
                minWidth: '230px',
                maxWidth: '230px',
                Cell: ({
                    data: { companyCode },
                }: PropsWithChildren<CellProps<any>>) => <>{companyCode}</>,
            },
            {
                name: 'signingEntities',
                title: 'Mapped SEs',
                minWidth: '400px',
                maxWidth: '400px',
                Cell: ({
                    data: { signingEntities },
                }: PropsWithChildren<CellProps<any>>) => {
                    if (isEmpty(signingEntities)) {
                        return <div style={{ whiteSpace: 'pre-wrap' }}>-</div>;
                    }

                    return (
                        <div style={{ whiteSpace: 'pre-wrap' }}>
                            {signingEntities
                                .map(
                                    (entity: AbacusSigningEntity) =>
                                        entity?.legalName
                                )
                                .filter(Boolean)
                                .map((legalName: string, index: number) => (
                                    <div key={`${legalName}-${index}`}>
                                        {legalName}
                                    </div>
                                ))}
                        </div>
                    );
                },
            },
        ];
    return REFERENCE_SAP_PROFIT_CENTERS_LIST_COLUMNS;
};