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

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

const cvmList = [
  {
    instanceId: "ins-f5a68io6",
    instanceName: "Hongkong VPN1",
    status: "running",
  },
  {
    instanceId: "ins-4m99aio4",
    instanceName: "Hongkong VPN2",
    status: "running",
  },
  {
    instanceId: "ins-3e7y5ww3",
    instanceName: "Guangzhou Test",
    status: "stopped",
  },
  {
    instanceId: "ins-49as515o",
    instanceName: "Hongkong Test",
    status: "running",
  },
  {
    instanceId: "ins-3e7y5ww2",
    instanceName: "Guangzhou Test",
    status: "stopped",
  },
  {
    instanceId: "ins-49as5151",
    instanceName: "Hongkong Test",
    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({
          maxHeight: 310,
          onScrollBottom: () => console.log("到达底部"),
        }),
        selectable({
          value: targetKeys,
          onChange,
          rowSelect: true,
        }),
      ]}
    />
  );
}

function TargetTable({ dataSource, onRemove }) {
  return (
    <Table
      records={dataSource}
      recordKey="instanceId"
      columns={columns}
      addons={[removeable({ onRemove })]}
    />
  );
}

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

  return (
    <Transfer
      header={
        <>
          <h4 style={{ display: "inline-block" }}>头部内容</h4>
          <Select placeholder="请选择" options={[]} />
        </>
      }
      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 title={`已选择 (${targetKeys.length})`}>
          <TargetTable
            dataSource={cvmList.filter(i => targetKeys.includes(i.instanceId))}
            onRemove={key => setTargetKeys(targetKeys.filter(i => i !== key))}
          />
        </Transfer.Cell>
      }
    />
  );
}