import React, { useState } from "react";
import {
  Transfer,
  Table,
  SearchBox,
  Select,
  Button,
  Modal,
} 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 DataTable({ dataSource, value, onChange }) {
  return (
    <Table
      records={dataSource}
      recordKey="instanceId"
      columns={columns}
      addons={[
        scrollable({
          maxHeight: 310,
          onScrollBottom: () => console.log("到达底部"),
        }),
        selectable({
          value,
          onChange,
          rowSelect: true,
        }),
      ]}
    />
  );
}

export default function TransferExample() {
  // 右侧框数据 key
  const [targetKeys, setTargetKeys] = useState([]);

  const [sourceSearchValue, setSourceSearchValue] = useState("");
  const [targetSearchValue, setTargetSearchValue] = useState("");
  const [sourceSelectedKeys, setSourceSelectedKeys] = useState([]);
  const [targetSelectedKeys, setTargetSelectedKeys] = useState([]);

  return (
    <Transfer
      operations={[
        {
          disabled: sourceSelectedKeys.length === 0,
          onClick: () => {
            setTargetKeys(targetKeys => [...targetKeys, ...sourceSelectedKeys]);
            setSourceSelectedKeys([]);
          },
        },
        {
          disabled: targetSelectedKeys.length === 0,
          onClick: () => {
            setTargetKeys(targetKeys =>
              targetKeys.filter(i => !targetSelectedKeys.includes(i))
            );
            setTargetSelectedKeys([]);
          },
        },
      ]}
      leftCell={
        <Transfer.Cell
          scrollable={false}
          title="选择云服务器"
          tip="支持按住 shift 键进行多选"
          header={
            <SearchBox
              value={sourceSearchValue}
              onChange={value => setSourceSearchValue(value)}
            />
          }
        >
          <DataTable
            dataSource={cvmList
              .filter(i => !targetKeys.includes(i.instanceId))
              .filter(
                i =>
                  i.instanceId.includes(sourceSearchValue) ||
                  i.instanceName.includes(sourceSearchValue)
              )}
            value={sourceSelectedKeys}
            onChange={keys => setSourceSelectedKeys(keys)}
          />
        </Transfer.Cell>
      }
      rightCell={
        <Transfer.Cell
          title={`已选择 (${targetKeys.length})`}
          header={
            <SearchBox
              value={targetSearchValue}
              onChange={value => setTargetSearchValue(value)}
            />
          }
        >
          <DataTable
            dataSource={cvmList
              .filter(i => targetKeys.includes(i.instanceId))
              .filter(
                i =>
                  i.instanceId.includes(targetSearchValue) ||
                  i.instanceName.includes(targetSearchValue)
              )}
            value={targetSelectedKeys}
            onChange={keys => setTargetSelectedKeys(keys)}
          />
        </Transfer.Cell>
      }
    />
  );
}