import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
/* eslint react/no-multi-comp:0, no-console:0, no-alert: 0 */
import BaseMixin from '../../_util/BaseMixin';
import '../assets/index.less';
import '../../vc-dialog/assets/index.less';
import Dialog from '../../vc-dialog';
import TreeSelect, { TreeNode, SHOW_PARENT } from '../src/index';
import { gData } from './util';
import './demo.less';

function isLeaf(value) {
  if (!value) {
    return false;
  }
  var queues = [].concat(_toConsumableArray(gData));
  while (queues.length) {
    // BFS
    var item = queues.shift();
    if (item.value === value) {
      if (!item.children) {
        return true;
      }
      return false;
    }
    if (item.children) {
      queues = queues.concat(item.children);
    }
  }
  return false;
}

function findPath(value, data) {
  var sel = [];
  function loop(selected, children) {
    for (var i = 0; i < children.length; i++) {
      var item = children[i];
      if (selected === item.value) {
        sel.push(item);
        return;
      }
      if (item.children) {
        loop(selected, item.children, item);
        if (sel.length) {
          sel.push(item);
          return;
        }
      }
    }
  }
  loop(value, data);
  return sel;
}

export default {
  mixins: [BaseMixin],
  data: function data() {
    return {
      tsOpen: false,
      visible: false,
      searchValue: '0-0-0-label',
      value: '0-0-0-value1',
      // value: ['0-0-0-0-value', '0-0-0-1-value', '0-0-0-2-value'],
      lv: { value: '0-0-0-value', label: 'spe label' },
      multipleValue: [],
      simpleSearchValue: 'test111',
      simpleTreeData: [{ key: 1, pId: 0, label: 'test1', value: 'test1' }, { key: 121, pId: 0, label: 'test2', value: 'test2' }, { key: 11, pId: 1, label: 'test11', value: 'test11' }, { key: 12, pId: 1, label: 'test12', value: 'test12' }, { key: 111, pId: 11, label: 'test111', value: 'test111' }],
      treeDataSimpleMode: {
        id: 'key',
        rootPId: 0
      }
    };
  },
  methods: {
    onClick: function onClick() {
      this.setState({
        visible: true
      });
    },
    onClose: function onClose() {
      this.setState({
        visible: false
      });
    },
    onSearch: function onSearch(value) {
      console.log('Do Search:', value, arguments);
      this.setState({ searchValue: value });
    },
    onChange: function onChange(value) {
      var _console;

      for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        rest[_key - 1] = arguments[_key];
      }

      (_console = console).log.apply(_console, ['onChange', value].concat(_toConsumableArray(rest)));
      this.setState({ value: value });
    },
    onChangeChildren: function onChangeChildren() {
      var _console2;

      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      (_console2 = console).log.apply(_console2, ['onChangeChildren'].concat(_toConsumableArray(args)));
      var value = args[0];
      var pre = value ? this.value : undefined;
      this.setState({ value: isLeaf(value) ? value : pre });
    },
    onChangeLV: function onChangeLV(value) {
      console.log('labelInValue', arguments);
      if (!value) {
        this.setState({ lv: undefined });
        return;
      }
      var path = findPath(value.value, gData).map(function (i) {
        return i.label;
      }).reverse().join(' > ');
      this.setState({ lv: { value: value.value, label: path } });
    },
    onMultipleChange: function onMultipleChange(value) {
      console.log('onMultipleChange', arguments);
      this.setState({ multipleValue: value });
    },
    onSelect: function onSelect() {
      // use onChange instead
      console.log(arguments);
    },
    onDropdownVisibleChange: function onDropdownVisibleChange(visible, info) {
      console.log(visible, this.value, info);
      if (Array.isArray(this.value) && this.value.length > 1 && this.value.length < 3) {
        window.alert('please select more than two item or less than one item.');
        return false;
      }
      return true;
    },
    filterTreeNode: function filterTreeNode(input, child) {
      return String(child.data.props.title).indexOf(input) === 0;
    }
  },

  render: function render() {
    var _this = this;

    var h = arguments[0];

    return h(
      'div',
      { style: { margin: '20px' } },
      [h('h2', ['tree-select in dialog']), h(
        'button',
        { 'class': 'btn btn-primary', on: {
            'click': this.onClick
          }
        },
        ['show dialog']
      ), this.visible ? h(
        Dialog,
        {
          attrs: {
            visible: this.visible,
            animation: 'zoom',
            maskAnimation: 'fade',

            id: 'area'
          },
          on: {
            'close': this.onClose
          },

          style: { width: '600px', height: '400px', overflow: 'auto' } },
        [h(
          'div',
          { style: { height: '600px', paddingTop: '100px' } },
          [h(TreeSelect, {
            attrs: {
              getPopupContainer: function getPopupContainer(triggerNode) {
                return triggerNode.parentNode;
              },

              transitionName: 'rc-tree-select-dropdown-slide-up',
              choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
              dropdownStyle: { maxHeight: '200px', overflow: 'auto', zIndex: 1500 },
              placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
              searchPlaceholder: 'please search',
              showSearch: true,
              allowClear: true,
              treeLine: true,
              value: this.value,
              treeData: gData,
              treeNodeFilterProp: 'label',
              filterTreeNode: false,

              __propsSymbol__: Symbol()
            },
            style: { width: '300px' }, on: {
              'search': this.onSearch,
              'change': this.onChange,
              'select': this.onSelect
            }
          })]
        )]
      ) : null, h('h2', ['single select']), h(TreeSelect, {
        style: { width: '300px' },
        attrs: { transitionName: 'rc-tree-select-dropdown-slide-up',
          choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
          dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          showSearch: true,
          allowClear: true,
          treeLine: true,
          searchValue: this.searchValue,
          value: this.value,
          treeData: gData,
          treeNodeFilterProp: 'label',
          filterTreeNode: false,

          open: this.tsOpen,

          dropdownVisibleChange: function dropdownVisibleChange(v, info) {
            console.log('single onDropdownVisibleChange', v, info);
            // document clicked
            if (info.documentClickClose && _this.value === '0-0-0-0-value') {
              return false;
            }
            _this.setState({
              tsOpen: v
            });
            return true;
          },

          __propsSymbol__: Symbol()
        },
        on: {
          'search': this.onSearch,
          'change': function change(value) {
            var _console3;

            for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
              args[_key3 - 1] = arguments[_key3];
            }

            (_console3 = console).log.apply(_console3, ['onChange', value].concat(args));
            if (value === '0-0-0-0-value') {
              _this.setState({ tsOpen: true });
            } else {
              _this.setState({ tsOpen: false });
            }
            _this.setState({ value: value });
          },
          'select': this.onSelect
        }
      }), h('h2', ['single select (just select children)']), h(TreeSelect, {
        style: { width: '300px' },
        attrs: { transitionName: 'rc-tree-select-dropdown-slide-up',
          choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
          dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          showSearch: true,
          allowClear: true,
          treeLine: true,
          value: this.value,
          treeData: gData,
          treeNodeFilterProp: 'label',
          filterTreeNode: false,

          __propsSymbol__: Symbol()
        },
        on: {
          'change': this.onChangeChildren
        }
      }), h('h2', ['multiple select']), h(TreeSelect, {
        style: { width: '300px' },
        attrs: { transitionName: 'rc-tree-select-dropdown-slide-up',
          choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
          dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          multiple: true,
          value: this.multipleValue,
          treeData: gData,
          treeNodeFilterProp: 'title',

          allowClear: true,
          __propsSymbol__: Symbol()
        },
        on: {
          'change': this.onMultipleChange,
          'select': this.onSelect
        }
      }), h('h2', ['check select']), h(TreeSelect, {
        'class': 'check-select',
        attrs: { transitionName: 'rc-tree-select-dropdown-slide-up',
          choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
          dropdownStyle: { height: '200px', overflow: 'auto' },
          dropdownPopupAlign: { overflow: { adjustY: 0, adjustX: 0 }, offset: [0, 2] },
          dropdownVisibleChange: this.onDropdownVisibleChange,
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          treeLine: true,
          maxTagTextLength: 10,
          value: this.value,
          autoClearSearchValue: true,
          treeData: gData,
          treeNodeFilterProp: 'title',
          treeCheckable: true,
          showCheckedStrategy: SHOW_PARENT,

          maxTagCount: 2,
          maxTagPlaceholder: function maxTagPlaceholder(valueList) {
            console.log('Max Tag Rest Value:', valueList);
            return valueList.length + ' rest...';
          },
          __propsSymbol__: Symbol()
        },
        on: {
          'change': this.onChange,
          'select': this.onSelect
        }
      }), h('h2', ['labelInValue & show path']), h(TreeSelect, {
        style: { width: '500px' },
        attrs: { transitionName: 'rc-tree-select-dropdown-slide-up',
          choiceTransitionName: 'rc-tree-select-selection__choice-zoom',
          dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          showSearch: true,
          allowClear: true,
          treeLine: true,
          value: this.lv,
          labelInValue: true,
          treeData: gData,
          treeNodeFilterProp: 'label',
          filterTreeNode: false,

          __propsSymbol__: Symbol()
        },
        on: {
          'change': this.onChangeLV
        }
      }), h('h2', ['use treeDataSimpleMode']), h(TreeSelect, {
        style: { width: '300px' },
        attrs: { dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          placeholder: h('i', ['\u8BF7\u4E0B\u62C9\u9009\u62E9']),
          searchPlaceholder: 'please search',
          treeLine: true,
          maxTagTextLength: 10,
          searchValue: this.simpleSearchValue,

          value: this.value,
          treeData: this.simpleTreeData,
          treeNodeFilterProp: 'title',
          treeDataSimpleMode: this.treeDataSimpleMode,
          treeCheckable: true,
          showCheckedStrategy: SHOW_PARENT,

          __propsSymbol__: Symbol()
        },
        on: {
          'search': function search(simpleSearchValue) {
            _this.setState({ simpleSearchValue: simpleSearchValue });
          },
          'change': this.onChange,
          'select': this.onSelect
        }
      }), h('h2', ['Testing in extreme conditions (Boundary conditions test) ']), h(TreeSelect, {
        style: { width: '200px' },
        attrs: { dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
          defaultValue: 'leaf1',
          multiple: true,
          treeCheckable: true,
          showCheckedStrategy: SHOW_PARENT,
          treeDefaultExpandAll: true,
          treeData: [{ key: '', value: '', label: 'empty value', children: [] }, {
            key: '0',
            value: '0',
            label: '0 label',
            children: [{ key: '00', value: '00', label: '00 label', children: [] }, { key: '01', value: '01', label: '01 label', children: [] }]
          }],

          __propsSymbol__: Symbol()
        },
        on: {
          'change': function change(val) {
            var _console4;

            for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
              args[_key4 - 1] = arguments[_key4];
            }

            return (_console4 = console).log.apply(_console4, [val].concat(args));
          }
        }
      }), h('h2', ['use TreeNode Component (not recommend)']), h(
        TreeSelect,
        {
          style: { width: '200px' },
          attrs: { dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
            defaultValue: 'leaf1',
            treeDefaultExpandAll: true,
            treeNodeFilterProp: 'title',
            filterTreeNode: this.filterTreeNode,

            __propsSymbol__: Symbol()
          },
          on: {
            'change': function change(val) {
              var _console5;

              for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
                args[_key5 - 1] = arguments[_key5];
              }

              return (_console5 = console).log.apply(_console5, [val].concat(args));
            }
          }
        },
        [h(
          TreeNode,
          {
            attrs: { value: '', title: 'parent 1' },
            key: '' },
          [h(
            TreeNode,
            {
              attrs: { value: 'parent 1-0', title: 'parent 1-0' },
              key: '0-1-0' },
            [h(TreeNode, {
              attrs: { value: 'leaf1', title: 'my leaf' },
              key: 'random' }), h(TreeNode, {
              attrs: { value: 'leaf2', title: 'your leaf', disabled: true },
              key: 'random1' })]
          ), h(
            TreeNode,
            {
              attrs: { value: 'parent 1-1', title: 'parent 1-1' },
              key: '0-1-1' },
            [h(TreeNode, {
              attrs: {
                value: 'sss',
                title: h(
                  'span',
                  { style: { color: 'red' } },
                  ['sss']
                )
              },
              key: 'random3'
            }), h(
              TreeNode,
              {
                attrs: { value: 'same value1', title: 'same txtle' },
                key: '0-1-1-1' },
              [h(TreeNode, {
                attrs: {
                  value: 'same value10',
                  title: 'same titlexd'
                },
                key: '0-1-1-1-0',
                style: { color: 'red', background: 'green' }
              })]
            )]
          )]
        ), h(
          TreeNode,
          {
            attrs: { value: 'same value2', title: 'same title' },
            key: '0-2' },
          [h(TreeNode, {
            attrs: { value: '2same value', title: '2same title' },
            key: '0-2-0' })]
        ), h(TreeNode, {
          attrs: { value: 'same value3', title: 'same title' },
          key: '0-3' })]
      )]
    );
  }
};