import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTreeSelect from 'syfed-tree-select';
import { TreeSelect, Select, Balloon } from '@alifd/next';
const { Tooltip } = Balloon;
const TreeNode = TreeSelect.Node;

const maxTagPlaceholder = (selectedValues, totalValues) => {
  debugger;
    const labels = selectedValues.map(obj => obj.label);
    // let content = labels.join(', ');
    let content = labels.map(item => (<div>{item}</div>));
    
    // 触发下拉显示的元素
    const trigger = <span className="syfed-select-tag-compact-inner">{labels.join(', ') }</span>;
    return (
      <Tooltip
        offset={[-20, -20]}
        closable={false}
        safeNode={document.getElementsByClassName('safeCls')[0]}
        className="syfed-select-safe syfed-select-balloon"
        trigger={trigger}
        triggerType="hover"
        align="bl"
        alignEdge
      >
        <div className="syfed-select-balloon-inner">{ content }</div>
      </Tooltip>
    );
  };

class App extends Component {
  /**
   * value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组
   * data: {Object/Array} 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点
   */
  onChange = (value, data) =>{
    console.log(value, data);
  }
  render() {
    // 树控件样式
    const treeselectStyles = {width: '200px'};

    // 模拟数据
    const testNodes = ( <TreeNode key="1" value="1" label="Component">
      <TreeNode key="2" value="2" label="Form">
        <TreeNode key="4" value="4" label="Input" />
        <TreeNode key="5" value="5" label="Select" />
      </TreeNode>
      <TreeNode key="3" value="3" label="Display">
        <TreeNode key="6" value="6" label="Table" />
        <TreeNode key="7" value="7" label="List" />
        <TreeNode key="8" value="8" label="Dropdown" />
        <TreeNode key="9" value="9" label="Progress" />
        <TreeNode key="10" value="10" label="Menu" />
        <TreeNode key="11" value="11" label="MenuButton" />
      </TreeNode>
    </TreeNode>);

    const dataSource = [
        {value: '10001', label: 'Lucy King'},
        {value: 10002, label: 'Lily King'},
        {value: 10003, label: 'Tom Cat', disabled: true},
        {label: 'Special Group', children: [
            {value: -1, label: 'FALSE'},
            {value: 0, label: 'ZERO'}
        ]}
    ];
    return (
      <div>
         <h4>小尺寸（small）</h4>
        <SyfedTreeSelect 
        multiple
        treeDefaultExpandAll
        treeCheckable
        treeCheckStrictly
        size="small" 
        treeCheckedStrategy="all"
        style={treeselectStyles}
        onChange={this.onChange}
        >
        {testNodes}
        </SyfedTreeSelect>
        <h4>默认尺寸（middle）</h4>
        <SyfedTreeSelect 
        multiple
        treeDefaultExpandAll
        treeCheckable
        // treeCheckStrictly
        treeCheckedStrategy="all"
        style={treeselectStyles}
        onChange={this.onChange}
        >
        {testNodes}
        </SyfedTreeSelect>
        <h4>大尺寸（large）</h4>
        <SyfedTreeSelect 
        multiple
        treeDefaultExpandAll
        treeCheckable
        treeCheckStrictly
        size="large" 
        treeCheckedStrategy="all"
        style={treeselectStyles}
        onChange={this.onChange}
        tipProps={
          {
            repeatLayout:'flow',
            repeatDirection:'ver',// ver/hor
            repeatItems: 3
          }
        }
        >
        {testNodes}
        </SyfedTreeSelect>
        <h4>select组件（类似处理实现）</h4>
        <Select 
        // aria-label="tag mode" 
        // mode="tag" 
        mode="multiple"
        defaultValue={['10001']} 
        onChange={this.onChange} 
        dataSource={dataSource} 
        style={{width: 120}} 
        tagInline
        maxTagPlaceholder={maxTagPlaceholder.bind(this)}
        maxTagCount={2}
        className="syfed-treeselect"
        />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);