import React, { useCallback } from 'react';
import { Checkbox } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { TableProps } from './interface';
import styles from './table.module.scss';

interface IProps<T> {
  total: number;
  checked: boolean;
  loading: boolean;
  toolNode: TableProps<T>['toolNode'];
  onSelectAll(checked: boolean): void
}

function ToolNode<T>({ total, checked, loading, toolNode, onSelectAll }: IProps<T>) {
  const onChange = useCallback((e: CheckboxChangeEvent) => onSelectAll(e.target.checked), [onSelectAll]);

  return (
    <div className={styles.toolBar}>
      <Checkbox indeterminate={!checked} disabled={loading} checked={checked} onChange={onChange}>
        全选(<span>{total}</span>条)
      </Checkbox>
      {!loading && toolNode!(total)}
    </div>
  );
}

export default ToolNode;