import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Tree, Button, Icon } from "../src/index";

const TreeNode = Tree.Node;
function onSelect(keys, info) {
  console.log('onSelect', keys, info)
}

function onCheck(keys, info) {
  console.log('onCheck', keys, info)
}

function onEditFinish(key, label, node) {
  console.log('onEditFinish', key, label, node)
}

function onRightClick(info) {
  console.log('onRightClick', info)
}

storiesOf("Tree", module).add("Tree", () => {
  this.state = {
    selectedKeys: []
  }

  return (
    <div id='app-wrapper'>
      <div id='app'>
      <Tree
        // checkable
        triangle={'true'}
        editable
        showLine
        defaultExpandedKeys={['2']}
        defaultCheckedKeys={['2', '4', '5']}
        onSelect={this.onSelect}
        onCheck={this.onCheck}
        onEditFinish={this.onEditFinish}
        onRightClick={this.onRightClick}
      >
        <TreeNode key="1" label="Component" icon={<Icon type="smile" />}>
          <TreeNode key="2" label="Form" selectable={false} icon="smile">
            <TreeNode key="4" label="Input" icon="smile" />
            <TreeNode key="5" label="Select" disabled icon="cry" />
          </TreeNode>
          <TreeNode key="3" label="Display" icon="smile">
            <TreeNode key="6" label="Table" icon="smile" />
          </TreeNode>
        </TreeNode>
      </Tree>
      <Tree defaultExpandAll showLine>
      <TreeNode label="Trunk">
        <TreeNode label="Branch">
          <TreeNode label="Branch">
            <TreeNode label="Leaf" />
          </TreeNode>
          <TreeNode label="Leaf" />
        </TreeNode>
        <TreeNode label="Branch">
          <TreeNode label="Leaf" />
          <TreeNode label="Leaf" />
        </TreeNode>
      </TreeNode>
    </Tree>
    <Tree
        // checkable
        editable
        text='true'
        defaultExpandedKeys={['2']}
        defaultCheckedKeys={['2', '4', '5']}
        onSelect={this.onSelect}
        onCheck={this.onCheck}
        onEditFinish={this.onEditFinish}
        onRightClick={this.onRightClick}
      >
        <TreeNode key="1" label="Component" icon={<Icon type="smile" />}>
          <TreeNode key="2" label="Form" selectable={false} icon="smile">
            <TreeNode key="4" label="Input" icon="smile" />
            <TreeNode key="5" label="Select" disabled icon="cry" />
          </TreeNode>
          <TreeNode key="3" label="Display" icon="smile">
            <TreeNode key="6" label="Table" icon="smile" />
          </TreeNode>
        </TreeNode>
      </Tree>
      </div>
    </div>
  );
});