import { Row, Col, Pagination } from 'antd';
import Table, {
  ColumnsType as AntColumnsType,
  TableProps
} from 'antd/es/table';
import React from 'react';
import { useTranslations } from 'use-intl';

export interface RowActionConfig<T> {
  onClick?: (record: T) => void;
  onDoubleClick?: (record: T) => void;
  className?: string;
  style?: React.CSSProperties;
}
export interface ColumnSearchProps {
  searchable?: boolean;
}

// Re-export ColumnsType
export type ColumnsType<T> = AntColumnsType<T>;

type AppTableProps<T> = {
  columns: ColumnsType<T>;
  dataSource: T[];
  loading?: boolean;
  pagination: { current: number; pageSize: number; total: number };
  rowKey?: string | ((record: T) => string);
  scroll?: TableProps<T>['scroll'];
  onChange?: TableProps<T>['onChange'];
  rowConfig?: RowActionConfig<T>;
};
function AppTable<T extends object = any>({
  columns,
  dataSource,
  loading = false,
  pagination,
  rowKey,
  scroll,
  onChange,
  rowConfig,
}: AppTableProps<T>) {
  

  const getRowProps = (record: T) => ({
    onClick: () => rowConfig?.onClick?.(record),
    onDoubleClick: () => rowConfig?.onDoubleClick?.(record),
    className: rowConfig?.className,
    style: {
      cursor: rowConfig?.onClick ? 'pointer' : 'default',
      ...rowConfig?.style
    }
  });
  return (
    <Table<T>
      columns={columns}
      dataSource={dataSource}
      loading={loading}
      // pagination={pagination}
      rowKey={rowKey}
      scroll={scroll}
      onChange={onChange}
      onRow={getRowProps}
      pagination={false}
      footer={() => <FooterTable pagination={pagination} onChange={onChange}/>}
    />
  );
}
export default AppTable;


type PropsFooterTable = {
  pagination: { current: number; pageSize: number; total: number };
  onChange: any;
}
const FooterTable = (props: PropsFooterTable) => {
  const { current, total, pageSize } = props.pagination;
  
  const t = useTranslations("");
  const to = Math.min(current * pageSize, total)
  const from = (current - 1) * pageSize + 1;
  return (
    <Row>
      <Col span={10} style={{ display: 'flex', alignItems: 'center', height: 32 }}>
        <span className="react-bootstrap-table-pagination-total">
          {t('label.tableTotal', { from: from, to, size: total })}
        </span>
      </Col>
      <Col span={14} style={{ display: 'flex', justifyContent: 'flex-end', paddingRight: '1rem' }}>
        <Pagination
          current={current}
          pageSize={pageSize}
          total={total}
          onChange={props.onChange}
          showSizeChanger={false}
          // showQuickJumper
        />
      </Col>
    </Row>
  );
}