// 使用拖拽多选功能的示例

import React, { useState } from 'react';
import { Table } from './Table';
import { Mark } from '../mock/collection';
import { TableColumn, RowSelection } from './types';

const ExampleTable: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 示例数据
  const data: Mark[] = [
    { 
      id: '1', 
      title: '示例标记 1', 
      description: '这是第一个标记的描述',
      data: { content: '这是第一个标记' },
      createdAt: new Date(),
      updatedAt: new Date()
    },
    { 
      id: '2', 
      title: '示例标记 2', 
      description: '这是第二个标记的描述',
      data: { content: '这是第二个标记' },
      createdAt: new Date(),
      updatedAt: new Date()
    },
    { 
      id: '3', 
      title: '示例标记 3', 
      description: '这是第三个标记的描述',
      data: { content: '这是第三个标记' },
      createdAt: new Date(),
      updatedAt: new Date()
    },
    // ... 更多数据
  ];

  // 表格列配置
  const columns: TableColumn<Mark>[] = [
    {
      key: 'title',
      title: '标题',
      dataIndex: 'title',
      width: 200,
      sortable: true,
    },
    {
      key: 'description',
      title: '描述',
      dataIndex: 'description',
      width: 300,
    },
    {
      key: 'createdAt',
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 180,
      render: (value: Date) => value.toLocaleString(),
    },
  ];

  // 行选择配置，启用拖拽多选
  const rowSelection: RowSelection<Mark> = {
    type: 'checkbox',
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[], selectedRows: Mark[]) => {
      console.log('选中的行键:', selectedRowKeys);
      console.log('选中的行数据:', selectedRows);
      setSelectedRowKeys(selectedRowKeys);
    },
    dragSelection: {
      enabled: true, // 启用拖拽多选
      multi: true,   // 支持多选
      onDragStart: (startRowIndex: number) => {
        console.log('开始拖拽选择，起始行索引:', startRowIndex);
      },
      onDragEnd: (selectedRows: Mark[]) => {
        console.log('拖拽选择结束，选中的行:', selectedRows);
      },
    },
  };

  return (
    <div style={{ height: '600px', padding: '20px' }}>
      <h2>表格拖拽多选示例</h2>
      <p>
        <strong>使用说明：</strong>
        <br />
        • 单击复选框进行单个选择
        <br />
        • 在表格行上拖拽可以选择多行（避开复选框和操作按钮）
        <br />
        • 按住 Ctrl/Cmd 键 + 拖拽可以追加选择
        <br />
        • 按住 Shift 键 + 点击复选框可以进行范围选择
        <br />
        • 按 Ctrl/Cmd + A 可以全选
        <br />
        • 按 Escape 键可以取消选择或取消拖拽操作
      </p>
      
      <Table
        data={data}
        columns={columns}
        rowSelection={rowSelection}
        virtualScroll={{ rowHeight: 48 }}
        loading={false}
      />
    </div>
  );
};

export default ExampleTable;