import React, { useMemo, useState } from "react";
import { Transfer, Table, SearchBox } from "@tencent/tea-component";

const { selectable, removeable, scrollable } = Table.addons;

const cvmList = Array(20000)
  .fill(null)
  .map((_, i) => ({
    instanceId: `ins-${i}`,
    instanceName: `name-${i}`,
    status: "running",
  }));

const columns = [
  {
    key: "instance",
    header: "ID/实例名",
    render: cvm => (
      <>
        <p>
          <a>{cvm.instanceId}</a>
        </p>
        <p>{cvm.instanceName}</p>
      </>
    ),
  },
  {
    key: "status",
    header: "状态",
    width: 100,
    render: cvm => {
      switch (cvm.status) {
        case "running":
          return <span style={{ color: "green" }}>运行中</span>;
        case "stopped":
          return <span style={{ color: "red" }}>已关机</span>;
      }
      return cvm.status;
    },
  },
];

function SourceTable({ dataSource, targetKeys, onChange }) {
  return (
    <Table
      records={dataSource}
      recordKey="instanceId"
      rowDisabled={record => record.status === "stopped"}
      rowClassName={record => record.status}
      columns={columns}
      addons={[
        scrollable({
          virtualizedOptions: {
            height: 310,
            itemHeight: 65,
            onScrollBottom: () => console.log("Bottom"),
          },
        }),
        selectable({
          value: targetKeys,
          onChange,
          rowSelect: true,
        }),
      ]}
    />
  );
}

function TargetTable({ dataSource, onRemove }) {
  return (
    <Table
      records={dataSource}
      recordKey="instanceId"
      columns={columns}
      addons={[
        scrollable({
          virtualizedOptions: {
            height: 340,
            itemHeight: 65,
          },
        }),
        removeable({ onRemove }),
      ]}
    />
  );
}

export default function TableScrollableDemo() {
  const [targetKeys, setTargetKeys] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const targetKeySet = useMemo(() => new Set(targetKeys), [targetKeys]);

  return (
    <Transfer
      leftCell={
        <Transfer.Cell
          scrollable={false}
          title="选择云服务器"
          tip="支持按住 shift 键进行多选"
          header={
            <SearchBox
              value={inputValue}
              onChange={value => setInputValue(value)}
            />
          }
        >
          <SourceTable
            dataSource={cvmList.filter(
              i =>
                i.instanceId.includes(inputValue) ||
                i.instanceName.includes(inputValue)
            )}
            targetKeys={targetKeys}
            onChange={keys => setTargetKeys(keys)}
          />
        </Transfer.Cell>
      }
      rightCell={
        <Transfer.Cell
          scrollable={false}
          title={`已选择 (${targetKeys.length})`}
        >
          <TargetTable
            dataSource={cvmList.filter(i => targetKeySet.has(i.instanceId))}
            onRemove={key => setTargetKeys(targetKeys.filter(i => i !== key))}
          />
        </Transfer.Cell>
      }
    />
  );
}