import React, { useState } from "react";
import * as rbd from "react-beautiful-dnd";
import { Button, Table, Input } from "@tencent/tea-component";

const { draggable } = Table.addons;

const defaultRecords = [
  { name: "Mario", age: 48, stage: "teenager", marriage: 0 },
  { name: "Luigi", age: 38, stage: "youth", marriage: 0 },
  { name: "Koopa", age: 28, stage: "youth", marriage: 1 },
  { name: "Yoshi", age: 18, stage: "youth", marriage: 0 },
  { name: "Link", age: 8, stage: "middle-aged", marriage: 2 },
  { name: "Zelda", age: 58, stage: "middle-aged", marriage: 1 },
  { name: "Wario", age: 68, stage: "elder", marriage: 3 },
  { name: "Pikachu", age: 78, stage: "elder", marriage: 4 },
];

export default function TableAddonExample() {
  const [records, setRecords] = useState(defaultRecords);
  return (
    <Table
      records={records}
      recordKey="name"
      rowDisabled={record => record.name === "张三"}
      columns={[
        { key: "name", header: "姓名" },
        {
          key: "age",
          header: "年龄",
          render: x => (
            <div style={{ display: "flex" }}>
              <Input defaultValue={String(x.age)} />
              <Button type="icon" icon="close" />
            </div>
          ),
        },
        {
          key: "stage",
          header: "年龄段",
          render: x => <Input defaultValue={String(x.stage)} />,
        },
        {
          key: "marriage",
          header: "操作",
          render: x => (
            <div style={{ display: "flex" }}>
              <Button type="icon" icon="setting" />
              <Button type="icon" icon="delete" />
            </div>
          ),
        },
      ]}
      addons={[
        draggable({
          module: rbd,
          onDragEnd: (records, context) => {
            setRecords(records);
          },
          onDragStart: context => console.log(context),
        }),
      ]}
    />
  );
}