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; }

import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import Instance from './instance';
import Button from './../Button';

// 函数组件因为没有实例, 所以也没有ref, 必须通过forwardRef回调ref
var ListPull = forwardRef(function (_ref, ref) {
  var list = _ref.list,
      onClick = _ref.onClick,
      onShowedLeft = _ref.onShowedLeft,
      onShowedRight = _ref.onShowedRight,
      others = _objectWithoutProperties(_ref, ['list', 'onClick', 'onShowedLeft', 'onShowedRight']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  var instance = useRef(null);
  // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects
  if (instance.current) {
    instance.current.params.onClick = click;
  }
  // useEffect(() => {
  //   instance.current.params.onClick = onClick;
  // }, [onClick]) // eslint-disable-line

  useEffect(function () {
    if (!refEl || !refEl.current) return;
    instance.current = new Instance(refEl.current, {
      onClick: click,
      onShowedLeft: onShowedLeft,
      onShowedRight: onShowedRight
    });
  }, []); // eslint-disable-line

  function click(s) {
    var e = s.event;
    var index = e.target.getAttribute('data-index');
    var option = list[index];
    var item = null;
    var i = e.target.getAttribute('data-i');
    var direction = e.target.getAttribute('data-direction');
    if (i && direction) {
      if (direction === 'left') {
        item = option.lButtons[i];
      } else {
        item = option.rButtons[i];
      }
    }
    if (onClick) onClick(s, item, index, option);
  }

  return React.createElement(
    'ul',
    { ref: refEl, className: 'list-pull' + (others.className ? ' ' + others.className : '') },
    list.map(function (item, index) {
      return React.createElement(
        'li',
        { key: 'button' + index, 'data-index': '' + index, className: 'border-b list-pull-li' },
        item.lButtons && item.lButtons.length && React.createElement(
          'div',
          { className: 'list-pull-left' },
          item.lButtons.map(function (button, i) {
            return React.createElement(
              Button,
              { key: 'button' + i, 'data-index': '' + index, 'data-i': '' + i, 'data-direction': 'left', className: 'list-pull-button' + (button.className ? ' ' + button.className : ''), style: button.style },
              button.caption
            );
          })
        ),
        React.createElement(
          'div',
          { className: 'list-pull-handler', 'data-index': '' + index },
          item.container
        ),
        item.rButtons && item.rButtons.length && React.createElement(
          'div',
          { className: 'list-pull-right' },
          item.rButtons.map(function (button, i) {
            return React.createElement(
              Button,
              { key: 'button' + i, 'data-index': '' + index, 'data-i': '' + i, 'data-direction': 'right', className: 'list-pull-button' + (button.className ? ' ' + button.className : ''), style: button.style },
              button.caption
            );
          })
        )
      );
    })
  );
});

export default ListPull;