// components/EnhancedProTable/EnhancedProTable.tsx

import { PlusOutlined } from '@ant-design/icons';
import {
  type ActionType,
  type ParamsType,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Space, Table } from 'antd';
import React, { forwardRef, useCallback, useMemo, useState } from 'react';
import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
import type { BaseRecord, EnhancedProTableProps } from './types';

function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
  props: EnhancedProTableProps<T, U>,
  ref: React.Ref<ActionType | undefined> | undefined,
) {
  const {
    columns,
    request,
    // actions = [],
    // permissions = [],
    checkPermission = () => true,
    toolbarActions,
    showIndex = true,
    showSelection = true,
    // showActions = true,
    // maxActionCount = 2,
    // onAdd,
    // onEdit,
    // onDelete,
    // onView,
    // onExport,
    // customToolbarRender,
    customActionRender,
    rowKey = 'id',
    ...restProps
  } = props;

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [selectedRows, setSelectedRows] = useState<T[]>([]);
  // 行选择配置
  const rowSelection = useMemo(() => {
    if (!showSelection) return undefined;
    return {
      selectedRowKeys,
      selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
      onChange: (keys: React.Key[], rows: T[]) => {
        setSelectedRowKeys(keys);
        setSelectedRows(rows);
      },
      getCheckboxProps: (record: T) => ({
        name: record[rowKey]?.toString(),
      }),
    };
  }, [showSelection, selectedRowKeys]);

  const toolBarRender = useCallback(() => {
    const toolbarElements =
      toolbarActions?.map((action) => {
        return (
          <Button
            key={action.key}
            type={action.type}
            danger={action.danger}
            disabled={action.disabled}
            icon={<PlusOutlined />}
            onClick={() => action.onClick(selectedRowKeys, selectedRows)}
          >
            {action.label}
          </Button>
        );
      }) || [];
    return toolbarElements;
  }, [toolbarActions]);
  return (
    <ProTable<T, U>
      {...restProps}
      columns={columns}
      actionRef={ref}
      request={request}
      rowKey={rowKey}
      rowSelection={rowSelection}
      toolBarRender={toolBarRender}
      manualRequest={false}
      showSorterTooltip
      scroll={{ x: 'max-content' }}
      search={{
        labelWidth: 'auto',
        defaultCollapsed: false,
        ...restProps.search,
      }}
      options={{
        fullScreen: true,
        reload: true,
        setting: true,
        density: true,
        ...restProps.options,
      }}
      pagination={{
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: 10,
        showTotal: formatPaginationTotal,
        ...restProps.pagination,
      }}
    />
  );
}

export default forwardRef(EnhancedProTable) as <
  T extends BaseRecord,
  U extends ParamsType = any,
>(
  props: EnhancedProTableProps<T, U> & { ref?: React.Ref<ActionType> },
) => React.ReactElement;