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

const {
  sortable,
  filterable,
  scrollable,
  radioable,
  injectable,
} = Table.addons;

const records = [
  { name: "Mario", age: 0, 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 },
];
const MARRIAGE_TEXT = ["未婚", "已婚", "离异", "再婚", "丧偶"];
const STAGE_TEXT = {
  teenager: "少年",
  youth: "青年",
  "middle-aged": "中年",
  elder: "老年",
};
const ALL_VALUE = "__ALL__";

export default function TableAddonExample() {
  // 年龄段筛选值
  const [stage, setStage] = useState(ALL_VALUE);
  // 婚姻状态筛选值
  const [marriages, setMarriages] = useState([]);
  // 当前排序列
  const [sorts, setSorts] = useState([]);
  // 当前选中行
  const [selected, setSelected] = useState(null);

  let filteredRecords = records.slice();

  // 根据年龄段筛选
  if (stage !== ALL_VALUE) {
    filteredRecords = filteredRecords.filter(x => x.stage === stage);
  }

  // 根据混音状态
  if (marriages.length > 0) {
    filteredRecords = filteredRecords.filter(
      record => marriages.indexOf(record.marriage) > -1
    );
  }

  // 如果要在前端排序，可以用 sortable.comparer 生成默认的排序方法
  filteredRecords.sort(sortable.comparer(sorts));

  return (
    <Table
      records={filteredRecords}
      recordKey="name"
      rowDisabled={record => record.name === "张三"}
      columns={[
        { key: "name", header: "姓名" },
        { key: "age", header: "年龄" },
        {
          key: "stage",
          header: "年龄段",
          render: x => STAGE_TEXT[x.stage],
        },
        {
          key: "marriage",
          header: "婚姻状态",
          render: x => MARRIAGE_TEXT[x.marriage],
        },
      ]}
      addons={[
        // 支持表格滚动，高度超过 192 开始显示滚动条
        scrollable({
          maxHeight: 192,
          minWidth: 1600,
          onScrollBottom: () => console.log("到达底部"),
        }),

        // 对 age 列增加单选过滤支持
        filterable({
          type: "single",
          column: "stage",
          value: stage,
          onChange: value => setStage(value),
          // 增加 "全部" 选项
          all: {
            value: ALL_VALUE,
            text: "全部",
          },
          // 选项列表
          options: [
            { value: "teenager", text: "少年" },
            { value: "youth", text: "青年" },
            { value: "middle-aged", text: "中年" },
            { value: "elder", text: "老年" },
          ],
        }),

        // 对 marriage 列增加多选过滤支持
        filterable({
          type: "multiple",
          column: "marriage",
          value: marriages.map(x => String(x)),
          onChange: value => {
            setMarriages(value.map(x => Number(x)));
          },
          all: {
            value: ALL_VALUE,
            text: "全部",
          },
          options: MARRIAGE_TEXT.map((text, index) => ({
            value: index.toString(),
            text,
          })),
        }),

        // 支持表格排序
        sortable({
          // 这两列支持排序，其中 age 列优先倒序
          columns: ["name", { key: "age", prefer: "desc" }],
          value: sorts,
          onChange: value => setSorts(value),
        }),

        // 支持表格单选
        radioable({
          value: selected,
          rowSelect: true,
          onChange: (value, context) => {
            console.log(value, context);
            setSelected(value);
          },
          render: (element, { disabled }) => {
            return disabled ? <Icon type="loading" /> : element;
          },
        }),

        // 支持 props 注入
        injectable({
          row: () => ({
            onClick: () => console.log("Row Click"),
          }),
        }),
      ]}
    />
  );
}