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

import React, { forwardRef, useContext } from 'react';
import { createPortal } from 'react-dom';
import Context from './../Context/instance.js';

var Actionsheet = forwardRef(function (_ref, ref) {
  var portal = _ref.portal,
      _ref$show = _ref.show,
      show = _ref$show === undefined ? false : _ref$show,
      _ref$animation = _ref.animation,
      animation = _ref$animation === undefined ? 'slideUp' : _ref$animation,
      duration = _ref.duration,
      list = _ref.list,
      _ref$maskAttribute = _ref.maskAttribute,
      maskAttribute = _ref$maskAttribute === undefined ? {} : _ref$maskAttribute,
      _ref$groupAttribute = _ref.groupAttribute,
      groupAttribute = _ref$groupAttribute === undefined ? {} : _ref$groupAttribute,
      _ref$optionAttribute = _ref.optionAttribute,
      optionAttribute = _ref$optionAttribute === undefined ? {} : _ref$optionAttribute,
      _ref$cancelCaption = _ref.cancelCaption,
      cancelCaption = _ref$cancelCaption === undefined ? '' : _ref$cancelCaption,
      _ref$cancelAttribute = _ref.cancelAttribute,
      cancelAttribute = _ref$cancelAttribute === undefined ? {} : _ref$cancelAttribute,
      onClick = _ref.onClick,
      others = _objectWithoutProperties(_ref, ['portal', 'show', 'animation', 'duration', 'list', 'maskAttribute', 'groupAttribute', 'optionAttribute', 'cancelCaption', 'cancelAttribute', 'onClick']);

  // context
  var context = useContext(Context) || {};
  var locale = context.locale || function (key) {
    return key || '';
  };

  function click(e) {
    var target = e.target;
    // 获取值
    var item = null;
    var index = null;
    if (target.classList.contains('actionsheet-option')) {
      index = target.getAttribute('data-index');
      index = Number(index);
      item = list[index] || null;
    }
    // 区分点击事件
    e.stopPropagation();
    if (target.classList.contains('actionsheet-option') && optionAttribute.onClick) {
      optionAttribute.onClick(e, item, index);
      return;
    }
    if (target.classList.contains('actionsheet-group') && groupAttribute.onClick) {
      groupAttribute.onClick(e);
      return;
    }
    if (target.classList.contains('actionsheet-mask') && maskAttribute.onClick) {
      maskAttribute.onClick(e);
      return;
    }
    if (target.classList.contains('actionsheet-cancel') && cancelAttribute.onClick) {
      cancelAttribute.onClick(e);
      return;
    }
    if (onClick) onClick(e, item, index);
  }

  // 构建动画
  var animationClassName = '';
  switch (animation) {
    case 'slideLeft':
      animationClassName = 'popup-animation right-middle';
      break;
    case 'slideRight':
      animationClassName = 'popup-animation left-middle';
      break;
    case 'slideUp':
      animationClassName = 'popup-animation bottom-center';
      break;
    case 'slideDown':
      animationClassName = 'popup-animation top-center';
      break;
    case 'zoom':
      animationClassName = 'popup-animation middle';
      break;
    case 'fade':
      animationClassName = 'popup-animation middle';
      break;
    case 'none':
      animationClassName = '';
      break;
    default:
      animationClassName = 'popup-animation middle';
  }

  // 动画时长
  var durationStyle = {};
  if (typeof duration === 'number') {
    durationStyle = {
      WebkitTransitionDuration: duration + 'ms'
    };
  }

  // 过滤已经回调的属性
  function filterProps(props) {
    if (!props) return {};

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

    return _extends({}, otherProps);
  }

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

  return createPortal(React.createElement(
    'div',
    _extends({
      ref: ref
    }, otherMaskAttribute, {
      className: 'mask actionsheet-mask' + (otherMaskAttribute.className ? ' ' + otherMaskAttribute.className : '') + (show ? ' active' : ''),
      style: Object.assign({}, durationStyle, otherMaskAttribute.style || {}),
      onClick: click
    }),
    React.createElement(
      'div',
      _extends({
        'data-animation': animation
      }, others, {
        className: 'actionsheet' + (animationClassName ? ' ' + animationClassName : '') + (others.className ? ' ' + others.className : '') + (show ? ' active' : ''),
        style: Object.assign({}, durationStyle, others.style || {})
      }),
      React.createElement(
        'div',
        _extends({}, otherGroupAttribute, { className: 'actionsheet-group' + (otherGroupAttribute.className ? ' ' + otherGroupAttribute.className : '') }),
        list && list.map(function (item, index) {
          return React.createElement(
            'a',
            _extends({}, otherOptionAttribute, { className: 'actionsheet-option' + (otherOptionAttribute.className ? ' ' + otherOptionAttribute.className : ' border-b'), key: index, 'data-index': index }),
            item.caption
          );
        })
      ),
      cancelAttribute.onClick && React.createElement(
        'a',
        _extends({}, otherCancelAttribute, { className: 'actionsheet-cancel' + (otherCancelAttribute.className ? ' ' + otherCancelAttribute.className : '') }),
        cancelCaption || locale('取消', 'cancel')
      )
    )
  ), portal || context.portal || document.getElementById('root') || document.body);
});

export default Actionsheet;