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), 使用了equals方法
import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import Instance from './instance.js';

var Marquee = forwardRef(function (_ref, ref) {
  var _ref$list = _ref.list,
      list = _ref$list === undefined ? [] : _ref$list,
      _ref$optionAttribute = _ref.optionAttribute,
      optionAttribute = _ref$optionAttribute === undefined ? {} : _ref$optionAttribute,
      _ref$step = _ref.step,
      step = _ref$step === undefined ? 50 : _ref$step,
      _ref$duration = _ref.duration,
      duration = _ref$duration === undefined ? 300 : _ref$duration,
      _ref$autoPlay = _ref.autoPlay,
      autoPlay = _ref$autoPlay === undefined ? 2000 : _ref$autoPlay,
      _ref$direction = _ref.direction,
      direction = _ref$direction === undefined ? 'top' : _ref$direction,
      _ref$loop = _ref.loop,
      loop = _ref$loop === undefined ? true : _ref$loop,
      _onClick = _ref.onClick,
      others = _objectWithoutProperties(_ref, ['list', 'optionAttribute', 'step', 'duration', 'autoPlay', 'direction', 'loop', 'onClick']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });

  var instance = useRef(null);
  useEffect(function () {
    if (instance.current || list.length === 0) return;
    initInstance();
  }, []);

  useEffect(function () {
    console.log('更新');
    update();
  }, [list]);

  function update() {
    if (!instance.current) return;
    instance.current.updateParams({
      start: 0,
      end: step * (list.length - 1)
    });
    if (autoPlay) {
      instance.current.play();
    }
  }
  function initInstance() {
    instance.current = new Instance(refEl.current, {
      start: 0,
      end: step * (list.length - 1),
      step: step,
      duration: duration,
      delay: autoPlay,
      direction: direction,
      loop: loop
    });
    if (autoPlay) {
      instance.current.play();
    }
    refEl.current.instance = instance;
  }
  // 过滤已经回调的属性
  function filterProps(props) {
    if (!props) return {};

    var onClick = props.onClick,
        otherProps = _objectWithoutProperties(props, ['onClick']);

    return _extends({}, otherProps);
  }

  // 剔除掉onClick事件, 因为在容器onClick已经回调了
  var otherOptionAttribute = filterProps(optionAttribute);

  return React.createElement(
    'ul',
    _extends({ ref: refEl }, others, { className: 'marquee' + (others.className ? ' ' + others.className : '') }),
    list && list.map(function (item, index) {
      return React.createElement(
        'li',
        _extends({ key: index }, otherOptionAttribute, { className: 'marquee-li' + (otherOptionAttribute.className ? ' ' + otherOptionAttribute.className : ''), style: Object.assign({ height: step + 'px' }, otherOptionAttribute.style || {}), onClick: function onClick(e) {
            if (_onClick) _onClick(e, item, index);
          } }),
        item.name
      );
    })
  );
});

export default Marquee;