import React, { ReactElement } from 'react';
import Typography from '../../typography';

import { ApolloColumnType } from '../interfaces';

export default function withCopyableAndEllipsis<T>(
  columns: ApolloColumnType<T>[],
): ApolloColumnType<T>[] {
  return columns.map((column): ApolloColumnType<T> => {
    if (column.render) {
      return column;
    }
    if (column.copyable || column.ellipsis) {
      return {
        ...column,
        render: (text): ReactElement =>
          text && (
            <Typography.Text
              copyable={
                column.copyable
                  ? {
                      text: String(text),
                    }
                  : false
              }
              style={{
                width: '100%',
              }}
              ellipsis={
                column.ellipsis
                  ? {
                      tooltip: String(text),
                    }
                  : false
              }
            >
              {text}
            </Typography.Text>
          ),
      };
    }

    return column;
  });
}