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

const { expandable, indentable } = Table.addons;

const records = getMockRecords();

export default function TableAddonExample() {
  // 当前展开的产品
  const [expandedKeys, setExpandedKeys] = useState([
    // 默认展开第一个产品
    String(records[0].fType),
  ]);
  const expandedSet = new Set(expandedKeys);

  /**
   * 生成子孙关系信息
   */
  const getRecordRelations = useCallback(records => {
    /**
     * @type {import('@tencent/tea-component/lib/checktree').CheckTreeRelation}
     */
    const relations = {};
    for (const record of records) {
      for (const msg of record.msgList) {
        relations[msg.msgType] = record.fType;
      }
    }
    return relations;
  }, []);

  const relations = useMemo(() => getRecordRelations(records), [
    getRecordRelations,
  ]);

  return (
    <Table
      // 配置行
      records={records}
      // 配置行键值
      recordKey={record => {
        // 这里要注意，原始数据中数据类型全是字符串，不转成字符串会导致 key 值匹配不上
        return String(record.msgList ? record.fType : record.msgType);
      }}
      // 配置列
      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.msgList || null,
          // 发生展开行为时，回调更新展开键值
          onExpandedKeysChange: keys => setExpandedKeys(keys),
          // 只有产品行允许展开
          shouldRecordExpandable: record => Boolean(record.msgList),
        }),
        indentable({
          // 缩进放在「消息类型」列上
          targetColumnKey: "name",
          // 提供层级关系
          relations,
        }),
      ]}
    />
  );
}

/**
 * 渲染图标列
 * @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 ({ fType, msgList }) => {
    if (msgList) {
      const type = String(fType);
      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 [
    {
      name: "财务消息",
      displayWeight: 1000,
      msgList: [
        {
          msgType: 213,
          fType: 106,
          name: "账户欠费通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: true,
            enableSms: true,
            enableWX: true,
          },
          receivers:
            "Coder体验账号, lewiszeng, vincehuang, cobipan, powellli, alexpang, asinli, neilsun, barry, hugooliu, ruippan, subAccount_huiping, frostzhao, condichen11, condichen22",
        },
        {
          msgType: 268,
          fType: 106,
          name: "余额预警通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: true,
            enableSms: true,
            enableWX: true,
          },
          receivers:
            "Coder体验账号, lewiszeng, vincehuang, cobipan, frostzhao, condichen, condichen22",
        },
        {
          msgType: 215,
          fType: 106,
          name: "账户提现通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号, lewiszeng, vincehuang, cobipan, alexpang",
        },
        {
          msgType: 310,
          fType: 106,
          name: "账单出账通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: true,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
      ],
      fType: "106",
    },
    {
      name: "产品消息",
      displayWeight: 900,
      msgList: [
        {
          msgType: 217,
          fType: 103,
          name: "产品到期、回收通知",
          currentChannel: {
            enableSiteMsg: true,
            enableEMail: false,
            enableSms: false,
            enableWX: true,
          },
          receivers: "lewiszeng, vincehuang, alexpang, frostzhao",
        },
        {
          msgType: 219,
          fType: 103,
          name: "产品自动续费通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号, lewiszeng, alexpang",
        },
        {
          msgType: 283,
          fType: 103,
          name: "CDM云数据迁移消息通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers:
            "Coder体验账号, lewiszeng, vincehuang, cobipan, powellli, daniclin, kurukhuang, alexpang, franklan, asinli",
        },
        {
          msgType: 208,
          fType: 103,
          name: "CDN相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
        {
          msgType: 294,
          fType: 103,
          name: "产品服务相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: false,
            enableWX: true,
          },
          receivers: "Coder体验账号, frostzhao",
        },
        {
          msgType: 267,
          fType: 103,
          name: "HTTPDNS相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers:
            "Coder体验账号, lewiszeng, vincehuang, cobipan, powellli, daniclin, kurukhuang, alexpang",
        },
        {
          msgType: 292,
          fType: 103,
          name: "DNSPod邮件通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
        {
          msgType: 233,
          fType: 103,
          name: "天御业务安全防护相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号, lewiszeng, alexpang",
        },
        {
          msgType: 269,
          fType: 103,
          name: "事件告警通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: true,
          },
          receivers: "Coder体验账号, frostzhao",
        },
        {
          msgType: 309,
          fType: 103,
          name: "工单服务通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: false,
            enableWX: true,
          },
          receivers: "Coder体验账号, frostzhao",
        },
        {
          msgType: 222,
          fType: 103,
          name: "SSL证书相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
        {
          msgType: 232,
          fType: 103,
          name: "官网服务通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: true,
          },
          receivers: "Coder体验账号, frostzhao",
        },
        {
          msgType: 256,
          fType: 103,
          name: "URL安全解决方案",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
        {
          msgType: 264,
          fType: 103,
          name: "渠道服务通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号, kurukhuang",
        },
        {
          msgType: 279,
          fType: 103,
          name: "证书两码发放",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
        {
          msgType: 302,
          fType: 103,
          name: "云市场服务通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
      ],
      fType: "103",
    },
    {
      name: "安全消息",
      displayWeight: 800,
      msgList: [
        {
          msgType: 207,
          fType: 104,
          name: "安全事件通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: true,
          },
          receivers:
            "Coder体验账号, lewiszeng, vincehuang, cobipan, powellli, daniclin, kurukhuang, alexpang, frostzhao",
        },
        {
          msgType: 303,
          fType: 104,
          name: "内容违规通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: true,
            enableSms: false,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
      ],
      fType: "104",
    },
    {
      name: "腾讯云动态",
      displayWeight: 700,
      msgList: [
        {
          msgType: 305,
          fType: 102,
          name: "云+社区相关通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: false,
            enableWX: true,
          },
          receivers: "Coder体验账号, frostzhao",
        },
        {
          msgType: 211,
          fType: 102,
          name: "活动通知",
          currentChannel: {
            enableSiteMsg: false,
            enableEMail: false,
            enableSms: true,
            enableWX: false,
          },
          receivers: "Coder体验账号",
        },
      ],
      fType: "102",
    },
  ];
}