import { Table, TableProps } from 'antd';
import { SearchProps } from 'antd/lib/input/Search';
import './AppTable.scss';

export interface AppTableProps<TRecordType extends object = any>
  extends TableProps<TRecordType>,
    Pick<SearchProps, 'onSearch' | 'value'> {
  seleactedActions?: ReactNodes;
  actions?: ReactNodes;
}

export function AppTable<TRecordType extends object = any>(
  props: AppTableProps<TRecordType>,
): any {
  const { value, seleactedActions, onSearch, actions, ...tableProps } = props;
  const selectedRowCount =
    tableProps.rowSelection?.selectedRowKeys?.length ?? 0;
  const hasSelected = selectedRowCount > 0;
  return (
    <div className="tableContainer">
      <div className="tableContainer__actions">
        <div className="bleContainer__icons flex-aic">
          {actions}
          {hasSelected && seleactedActions && seleactedActions}
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowCount} items` : ''}
          </span>
        </div>
      </div>
      <Table {...tableProps} loading={tableProps.loading} />
    </div>
  );
}
