import { Input, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

interface TableProps {
  treeData?: User.OrganizationNode[];
  selectedRowKeys?: any[];
  onUserTableSelect?: (keys: any[], row: any[]) => void;
}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const TablePage: React.FC<TableProps> = ({
  onUserTableSelect,
  selectedRowKeys,
}) => {
  const [data, setData] = useState<any[]>([]);
  const [searchText, setSearchText] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [total, setTotal] = useState(0);

  // Mock data generation
  useEffect(() => {
    const mockData: DataType[] = [];
    for (let i = 0; i < 100; i++) {
      mockData.push({
        id: i + 99,
        name: `User ${i}`,
      });
    }
    setData(mockData);
    setTotal(mockData.length);
  }, []);

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'Name',
      dataIndex: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
    },
  ];

  const handleSearch = (value: string) => {
    setSearchText(value);
    setCurrentPage(1);
  };

  const handlePageChange = (page: number, size: number) => {
    setCurrentPage(page);
    setPageSize(size);
  };

  const handlePageSizeChange = (current: number, size: number) => {
    setCurrentPage(1);
    setPageSize(size);
  };

  return (
    <div className={styles.content_wrap}>
      <div className={styles.search_wrap}>
        <Input.Search
          placeholder="镜像名称..."
          onSearch={handleSearch}
          enterButton
          allowClear
          style={{ width: '200px', marginLeft: '10px' }}
        />
      </div>

      <Table
        // rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          preserveSelectedRowKeys: true,
          onChange: onUserTableSelect,
        }}
        pagination={{
          current: currentPage,
          pageSize: pageSize,
          total: total,
          simple: true,
          onChange: handlePageChange,
          onShowSizeChange: handlePageSizeChange,
          showSizeChanger: false,
          showQuickJumper: false,
        }}
        scroll={{ x: 'max-content', y: 300 }}
      />
    </div>
  );
};

export default TablePage;