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 Carrousel = forwardRef(function (_ref, ref) {
  var style = _ref.style,
      className = _ref.className,
      _ref$slideAttribute = _ref.slideAttribute,
      slideAttribute = _ref$slideAttribute === undefined ? {} : _ref$slideAttribute,
      _ref$pagination = _ref.pagination,
      pagination = _ref$pagination === undefined ? false : _ref$pagination,
      _ref$paginationAttrib = _ref.paginationAttribute,
      paginationAttribute = _ref$paginationAttrib === undefined ? {} : _ref$paginationAttrib,
      _ref$prevAttribute = _ref.prevAttribute,
      prevAttribute = _ref$prevAttribute === undefined ? {} : _ref$prevAttribute,
      _ref$nextAttribute = _ref.nextAttribute,
      nextAttribute = _ref$nextAttribute === undefined ? {} : _ref$nextAttribute,
      _ref$stopPropagation = _ref.stopPropagation,
      stopPropagation = _ref$stopPropagation === undefined ? false : _ref$stopPropagation,
      activeIndex = _ref.activeIndex,
      _ref$loop = _ref.loop,
      loop = _ref$loop === undefined ? false : _ref$loop,
      _ref$autoplay = _ref.autoplay,
      autoplay = _ref$autoplay === undefined ? 0 : _ref$autoplay,
      _ref$slidesPerView = _ref.slidesPerView,
      slidesPerView = _ref$slidesPerView === undefined ? 1 : _ref$slidesPerView,
      _ref$defaultSrc = _ref.defaultSrc,
      defaultSrc = _ref$defaultSrc === undefined ? '//res.waiqin365.com/d/seedsui/carrousel/default.png' : _ref$defaultSrc,
      _ref$list = _ref.list,
      list = _ref$list === undefined ? [] : _ref$list,
      _ref$enableOnChange = _ref.enableOnChange,
      enableOnChange = _ref$enableOnChange === undefined ? true : _ref$enableOnChange,
      _ref$speed = _ref.speed,
      speed = _ref$speed === undefined ? 300 : _ref$speed,
      onClick = _ref.onClick,
      onChange = _ref.onChange,
      _ref$delay = _ref.delay,
      delay = _ref$delay === undefined ? 500 : _ref$delay,
      children = _ref.children,
      others = _objectWithoutProperties(_ref, ['style', 'className', 'slideAttribute', 'pagination', 'paginationAttribute', 'prevAttribute', 'nextAttribute', 'stopPropagation', 'activeIndex', 'loop', 'autoplay', 'slidesPerView', 'defaultSrc', 'list', 'enableOnChange', 'speed', 'onClick', 'onChange', 'delay', 'children']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  var childrenArr = React.Children.toArray(children);
  var instance = useRef(null);

  function slideToIndex() {
    // 设置选中项
    var len = childrenArr.length || (list || []).length;
    if (isNaN(activeIndex) && activeIndex <= len - 1) {
      instance.current.slideTo(activeIndex, 0, false);
    }
  }

  function update() {
    if (!instance.current || !instance.current.updateParams) return;
    instance.current.updateParams({
      height: style && style.height ? style.height : null,
      width: style && style.width ? style.width : null,
      stopPropagation: stopPropagation,
      autoplay: autoplay,
      slidesPerView: slidesPerView,
      loop: loop,
      imgLoadSrc: defaultSrc
    });
    // 设置选中项
    slideToIndex();
  }
  useEffect(function () {
    // 只有list或children发生变化时才更新
    update();
  }, [list, children, activeIndex]);

  useEffect(function () {
    if (!refEl || !refEl.current) return;
    instance.current = new Instance(refEl.current, {
      height: style && style.height ? style.height : null,
      width: style && style.width ? style.width : null,
      stopPropagation: stopPropagation,
      autoplay: autoplay,
      slidesPerView: slidesPerView,
      loop: loop,
      imgLoadSrc: defaultSrc,
      onClick: onClick,
      onSlideChangeEnd: onChange ? onChange : null
    });
    // 轮播图片, 自适应的情况下, 高度需要计算
    if (!(style && style.height) && list.length && delay) {
      setTimeout(function () {
        instance.current.updateContainerSize();
        slideToIndex();
      }, delay);
    }
  }, []);

  // 点击轮播
  function onClick(s, e) {
    var index = s.activeIndex;
    if (onClick) onClick(list[index], index, s, e);
  }
  // 如果className没有carrousel-container或者carrousel-page, 则补充一个
  function getCarrouselClassName() {
    if (className) {
      if (className.indexOf('carrousel-container') !== -1 || className.indexOf('carrousel-page') !== -1) {
        return className;
      }
    }
    return 'carrousel-container' + (className ? ' ' + className : '');
  }
  // 如果项中包含bg属性, 则加入到style中
  function getSlideStyle(item) {
    if (item.bg) {
      return Object.assign({ backgroundImage: 'url(' + (defaultSrc ? defaultSrc : item.bg) + ')' }, slideAttribute.style);
    }
    return slideAttribute.style;
  }

  return React.createElement(
    'div',
    _extends({ ref: refEl, className: getCarrouselClassName(), style: style }, others),
    React.createElement(
      'div',
      { className: 'carrousel-wrapper' },
      list.length > 0 && list.map(function (item, index) {
        return React.createElement(
          'div',
          _extends({}, slideAttribute, { className: 'carrousel-slide' + (slideAttribute.className ? ' ' + slideAttribute.className : ''), style: getSlideStyle(item), key: index, 'data-load-src': defaultSrc ? item.bg : null }),
          item.img && React.createElement('img', { className: 'carrousel-slide-img', alt: '', src: defaultSrc ? defaultSrc : item.img, 'data-load-src': defaultSrc ? item.img : null }),
          item.caption && React.createElement(
            'div',
            { className: 'carrousel-summary' },
            item.iconAttribute && React.createElement('i', _extends({}, item.iconAttribute, { className: 'icon carrousel-summary-icon' + (item.iconAttribute.className ? ' ' + item.iconAttribute.className : '') })),
            React.createElement(
              'span',
              { className: 'nowrap carrousel-summary-caption', style: { marginRight: '20px' } },
              item.caption
            )
          )
        );
      }),
      list.length === 0 && childrenArr && childrenArr.map(function (item, index) {
        return React.createElement(
          'div',
          { className: 'carrousel-slide', key: index },
          item
        );
      })
    ),
    pagination === true && React.createElement('div', _extends({}, paginationAttribute, { className: 'carrousel-pagination' + (paginationAttribute.className ? ' ' + paginationAttribute.className : '') })),
    pagination && pagination !== true && pagination,
    list.length > 1 && React.createElement('div', _extends({}, prevAttribute, { className: 'carrousel-prev' + (prevAttribute.className ? ' ' + prevAttribute.className : '') })),
    list.length > 1 && React.createElement('div', _extends({}, nextAttribute, { className: 'carrousel-next' + (nextAttribute.className ? ' ' + nextAttribute.className : '') }))
  );
});

export default Carrousel;
// export default React.memo(Carrousel, (prevProps, nextProps) => {
//   if (prevProps.activeIndex !== nextProps.activeIndex) return false;
//   // 列表或者子元素一致则不要触发更新
//   const prevChildren = React.Children.toArray(prevProps.children) || [];
//   const nextChildren = React.Children.toArray(nextProps.children) || [];
//   if ((prevProps.list || []).length === (nextProps.list || []).length && prevChildren.length === nextChildren.length && (prevProps.list || []).equals((prevProps.list || []))) {
//     return true;
//   }
//   return false;
// })