var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

// require PrototypeArray.js
import React, { useEffect, useState, forwardRef } from 'react';

var slotClass = 'menutiled-slot';
var slotSubClass = 'menutiled-slot-sub';
var tagClass = 'menutiled-tag';
var tagFontClass = 'menutiled-tag-font';
var iconMoreClass = 'menutiled-icon-more';
var iconSelectClass = 'menutiled-icon-checked';
var activeClass = 'active';

var MenuTiled = forwardRef(function (_ref, ref) {
  var selected = _ref.selected,
      onChange = _ref.onChange,
      list = _ref.list,
      others = _objectWithoutProperties(_ref, ['selected', 'onChange', 'list']);

  var _useState = useState(null),
      viewGroups = _useState[0],
      setViewGroups = _useState[1]; // 分组显示数据


  var _useState2 = useState(list),
      data = _useState2[0],
      setData = _useState2[1]; // 将list转换成标准格式

  // 格式化列表数据


  function fmtList() {
    if (!list || !list.length) return [];
    if (JSON.stringify(list).indexOf('"children"') === -1) {
      var newList = Object.clone(list);
      return newList.deepTree();
    }
    return list;
  }
  useEffect(function () {
    data = fmtList(); // eslint-disable-line
    setData(data);
    setViewGroups([data]);
  }, [list]);

  // 点击选项
  function click(e) {
    if (e.target.classList.contains(tagClass)) {
      // 点击项
      // 选中点击行
      // const row = Number(e.target.getAttribute('data-index') || 0);
      var id = e.target.getAttribute('data-id');
      var item = data.getDeepTreeNode(id);
      // 删除后面的层级
      var hierarchy = Number(e.target.getAttribute('data-hierarchy') || 0);
      var newViewGroups = Object.clone(viewGroups);
      newViewGroups.splice(hierarchy + 1);
      // 如果有子级, 添加子级
      if (item.children && item.children.length) {
        // 添加子级
        if (!newViewGroups[hierarchy + 1]) newViewGroups[hierarchy + 1] = [];
        newViewGroups[hierarchy + 1] = item.children;
      } else if (onChange) {
        // 叶子节点点击触发
        onChange(e, item.name, [item], data);
      }
      setViewGroups(newViewGroups);
    }
  }

  // 判断是否选中
  function isSelected(id) {
    for (var _iterator = selected, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
      var _ref2;

      if (_isArray) {
        if (_i >= _iterator.length) break;
        _ref2 = _iterator[_i++];
      } else {
        _i = _iterator.next();
        if (_i.done) break;
        _ref2 = _i.value;
      }

      var item = _ref2;

      if (item.id === id) return true;
    }
    return false;
  }

  return React.createElement(
    'div',
    _extends({ ref: ref }, others, { className: 'menutiled' + (others.className ? ' ' + others.className : ''), onClick: click }),
    React.createElement(
      'div',
      { className: 'menutiled-wrapper' },
      (viewGroups || []).map(function (group, groupIndex) {
        return React.createElement(
          'div',
          { key: groupIndex, className: '' + (groupIndex ? slotSubClass : slotClass) },
          group.map(function (option, optionIndex) {
            return React.createElement(
              'div',
              { key: optionIndex, 'data-index': optionIndex, 'data-hierarchy': groupIndex, 'data-id': option.id, className: 'menutiled-tag' + (isSelected(option.id) ? ' ' + activeClass : '') },
              React.createElement(
                'p',
                { className: tagFontClass },
                option.name
              ),
              option.children && option.children.length > 0 ? React.createElement('i', { className: iconMoreClass }) : React.createElement('i', { className: iconSelectClass })
            );
          })
        );
      })
    )
  );
});

export default MenuTiled;