/* eslint-disable @typescript-eslint/no-unused-vars */
import React from "react";
import { testExamples, render, fireEvent, testDebug } from "@test/utils";
import { Checkbox } from "@tencent/tea-component/lib/checkbox";
import { CheckTree, CheckTreeProps } from "../CheckTree";

// 测试组件代码 Example 快照
testExamples(__dirname);

test("tree check logic", () => {
  /**
  用于测试的树
  ```
    root
      child-1
        child-1-1
      child2
        child-2-1
        child-2-2
      child3
        child-3-1
        child-3-2
        child-3-3
    ```
  */
  const relation = {
    root: null,
    "child-1": "root",
    "child-2": "root",
    "child-3": "root",
    "child-1-1": "child-1",
    "child-2-1": "child-2",
    "child-2-2": "child-2",
    "child-3-1": "child-3",
    "child-3-2": "child-3",
    "child-3-3": "child-3",
  };
  type TreeKeys = keyof typeof relation;
  const onChange = jest.fn() as jest.MockedFunction<CheckTreeProps["onChange"]>;
  const { getByLabelText, debug } = render(
    <CheckTree relations={relation} onChange={onChange}>
      {Object.keys(relation).map(key => (
        <Checkbox key={key} name={key}>
          {key}
        </Checkbox>
      ))}
    </CheckTree>
  );
  const get = (name: TreeKeys) => getByLabelText(name) as HTMLInputElement;
  /**
   * 把状态序列化成：
    ```
    [-] root
      [x] child-1
        [ ] child-1-1
      [ ] child2
        [ ] child-2-1
        [ ] child-2-2
      [ ] !child3
        [ ] child-3-1
        [ ] child-3-2
        [ ] child-3-3
    ```
    [ ] - 未勾选
    [x] - 已勾选
    [-] - 半勾选
    !   - 已禁用
   */
  const state = () => {
    const line = (indentedName: string) => {
      const name = indentedName.trim() as TreeKeys;
      const indent = indentedName.split(name).shift();
      const { checked, disabled, indeterminate } = get(name);
      // eslint-disable-next-line
      const checkMark = checked ? "[x]" : indeterminate ? "[-]" : "[ ]";
      const disableMark = disabled ? "!" : "";
      return `${indent}${checkMark} ${disableMark}${name}`;
    };
    const result = [
      line("root"),
      line("    child-1"),
      line("        child-1-1"),
      line("    child-2"),
      line("        child-2-1"),
      line("        child-2-2"),
      line("    child-3"),
      line("        child-3-1"),
      line("        child-3-2"),
      line("        child-3-3"),
    ].join("\n");
    testDebug("\n=============================\n", result);
    return result;
  };
  const check = (name: TreeKeys, checked = true) =>
    fireEvent.click(get(name), { currentTarget: { checked } });
  const uncheck = (name: TreeKeys) => check(name, false);

  // 初始状态，都没勾选
  expect(state()).toMatchSnapshot();

  // 勾选测试
  check("child-1-1");
  expect(state()).toMatchSnapshot();

  check("child-2");
  expect(state()).toMatchSnapshot();

  check("child-3");
  expect(state()).toMatchSnapshot();

  uncheck("root");
  expect(state()).toMatchSnapshot();
});