import React, { useState } from "react";
import { Table, Icon, Button, Modal } from "@tencent/tea-component";

const { expandable, indentable, draggable } = Table.addons;

const recordData = getMockRecords();

export default function TableRowsDraggableExample() {
  const [records, setRecords] = useState(recordData || []);

  // 当前展开的产品
  const [expandedKeys, setExpandedKeys] = useState([
    // 默认展开第一个产品
    String(records[0].id),
  ]);

  const expandedSet = new Set(expandedKeys);

  /**
   * 生成子孙关系信息
   */
  const getRecordRelations = records => {
    /**
     * @type {import('@tencent/tea-component/lib/checktree').CheckTreeRelation}
     */
    const relations = {};
    const getRelations = (records, parentId = "") => {
      for (const record of records) {
        if (parentId) {
          relations[record.id] = parentId;
        }
        if (record.childrenList && Array.isArray(record.childrenList)) {
          record.childrenList.forEach(item => {
            relations[item.id] = record.id;
            if (item.childrenList && Array.isArray(item.childrenList)) {
              getRelations(item.childrenList, item.id);
            }
          });
        }
      }
    };
    getRelations(records);

    return relations;
  };

  const relations = getRecordRelations(records);

  return (
    <Table
      // 配置行
      records={records}
      // 配置行键值
      recordKey={record => {
        // 这里要注意，原始数据中数据类型全是字符串，不转成字符串会导致 key 值匹配不上
        return String(record.id);
      }}
      // 配置列
      columns={[
        {
          key: "name",
          header: "消息类型",
          render: record => record.name,
          width: 250,
        },
        renderIconColumn("enableSiteMsg", "站内信"),
        renderIconColumn("enableEMail", "邮件"),
        renderIconColumn("enableSms", "短信"),
        renderIconColumn("enableWX", "微信"),
        {
          key: "receivers",
          header: "接收人",
          render: record => record.receivers || null,
        },
        {
          key: "settings",
          header: "操作",
          width: 100,
          render: renderOperationColumn(expandedSet, setExpandedKeys),
        },
      ]}
      // 配置插件
      addons={[
        expandable({
          // 已经展开的产品
          expandedKeys,
          // 产品展开为消息行
          expand: record => record.childrenList || null,
          // 发生展开行为时，回调更新展开键值
          onExpandedKeysChange: keys => setExpandedKeys(keys),
          // 只有产品行允许展开
          shouldRecordExpandable: record => Boolean(record.childrenList),
          targetColumnKey: "name",
        }),
        indentable({
          // 缩进放在「消息类型」列上
          targetColumnKey: "name",
          // 提供层级关系
          relations,
        }),
        draggable({
          expandedKeys,
          relations,
          dragType: "tree",
          childrenColName: "childrenList",
          onExpandedKeysChange: keys => setExpandedKeys(keys),
          onDragEnd: (records, dragContext) => {
            console.log(dragContext);
            setRecords(records);
          },
          onDragStart: context => console.log(context),
        }),
      ]}
    />
  );
}

/**
 * 渲染图标列
 * @param {string} key
 * @param {string} header
 */
function renderIconColumn(key, header) {
  return {
    key,
    header,
    width: 80,
    render: record => {
      if (!record.currentChannel || !record.currentChannel[key]) {
        return null;
      }
      return <Icon type="success" />;
    },
  };
}

/**
 * 渲染操作列
 * @param {Set<string>} expandedSet
 * @param {(keys: string[]) => void} setExpandedKeys
 */
function renderOperationColumn(expandedSet, setExpandedKeys) {
  return ({ id, childrenList }) => {
    if (childrenList) {
      const type = String(id);
      const text = expandedSet.has(type) ? "收起" : "展开";
      return (
        <Button
          type="link"
          onClick={() => {
            if (expandedSet.has(type)) {
              expandedSet.delete(type);
            } else {
              expandedSet.add(type);
            }
            setExpandedKeys(Array.from(expandedSet));
          }}
        >
          <strong>{text}</strong>
        </Button>
      );
    }
    return (
      <Button
        type="link"
        onClick={() =>
          Modal.success({
            message: "设置点啥",
            description: "我也不知道呀",
          })
        }
      >
        设置
      </Button>
    );
  };
}

/**
 * 模拟数据
 */
function getMockRecords() {
  return [
    {
      id: "1001",
      parentId: "",
      name: "财务消息",
      displayWeight: 1000,
      childrenList: [
        {
          id: "2001",
          parentId: "1001",
          name: "账户欠费通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: true,
            enableSms: true,
            enableWX: true,
          },
          receivers: "Coder体验账号, lewiszeng, vincehuang, cobipan",
        },
      ],
    },
    {
      id: "1002",
      parentId: null,
      name: "产品消息",
      displayWeight: 900,
      childrenList: [
        {
          id: "2003",
          parentId: "1002",
          name: "产品到期、回收通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: false,
            enableSms: false,
            enableWX: true,
          },
          receivers: "lewiszeng, vincehuang, alexpang, frostzhao",
          childrenList: [
            {
              id: "3001",
              parentId: "2003",
              name: "产品新功能上线提醒",
              currentChannel: {
                enableSiteMsg: true,
                enableEMail: false,
                enableSms: false,
                enableWX: true,
              },
              receivers: "lewiszeng, vincehuang, alexpang, frostzhao",
            },
            {
              id: "3002",
              parentId: "2003",
              name: "产品即将被隔离",
              currentChannel: {
                enableSiteMsg: false,
                enableEMail: true,
                enableSms: false,
                enableWX: false,
              },
              receivers: "Coder体验账号, lewiszeng, alexpang",
            },
          ],
        },
        {
          id: "2004",
          parentId: "1002",
          name: "产品已停服",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号, lewiszeng, alexpang",
        },
      ],
    },
  ];
}