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, useRef, useImperativeHandle, useEffect, useContext } from 'react';
import { createPortal } from 'react-dom';
import Instance from './instance.js';
import Context from '../Context/instance.js';

var Picker = forwardRef(function (_ref, ref) {
  var portal = _ref.portal,
      _ref$list = _ref.list,
      list = _ref$list === undefined ? [] : _ref$list,
      _ref$show = _ref.show,
      show = _ref$show === undefined ? false : _ref$show,
      value = _ref.value,
      selected = _ref.selected,
      _ref$maskAttribute = _ref.maskAttribute,
      maskAttribute = _ref$maskAttribute === undefined ? {} : _ref$maskAttribute,
      _ref$submitAttribute = _ref.submitAttribute,
      submitAttribute = _ref$submitAttribute === undefined ? {} : _ref$submitAttribute,
      _ref$cancelAttribute = _ref.cancelAttribute,
      cancelAttribute = _ref$cancelAttribute === undefined ? {} : _ref$cancelAttribute,
      _ref$slotAttribute = _ref.slotAttribute,
      slotAttribute = _ref$slotAttribute === undefined ? {} : _ref$slotAttribute,
      others = _objectWithoutProperties(_ref, ['portal', 'list', 'show', 'value', 'selected', 'maskAttribute', 'submitAttribute', 'cancelAttribute', 'slotAttribute']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  var instance = useRef(null);
  useEffect(function () {
    initInstance();
  }, []); // eslint-disable-line

  useEffect(function () {
    if (instance.current) {
      if (show && list.length) {
        setDefault();
        instance.current.show();
      } else {
        instance.current.hide();
      }
    } else if (list && list.length > 0) {
      initInstance();
    }
  }, [show]); // eslint-disable-line

  function setDefault() {
    var defaultOpt = getDefaultOption();
    instance.current.clearSlots();
    instance.current.addSlot(list, defaultOpt.id || '', slotAttribute.className || 'text-center'); // 添加列,参数:数据,默认id,样式(lock样式为锁定列)
  }

  function getDefaultOption() {
    if (selected && selected.length) {
      return selected[0];
    }
    if (value) {
      for (var _iterator = list, _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.name === value) return item;
      }
      return null;
    }
    return null;
  }

  function initInstance() {
    if (!list || !list.length || instance.current) {
      console.log('SeedsUI Picker: 参数list为空');
      return;
    }
    // render数据
    instance.current = new Instance({
      mask: refEl.current,
      onClickMask: function onClickMask(e) {
        if (maskAttribute.onClick) maskAttribute.onClick(e);
      },
      onClickCancel: function onClickCancel(e) {
        if (cancelAttribute.onClick) cancelAttribute.onClick(e);
      },
      onClickSubmit: function onClickSubmit(e) {
        var value = e.activeOptions[0].name;
        var options = e.activeOptions;
        if (submitAttribute.onClick) submitAttribute.onClick(e, value, options);
      },
      onHid: function onHid(e) {}
    });
    // 默认项
    var defaultOpt = getDefaultOption();
    var id = '';
    if (defaultOpt && defaultOpt.id) id = defaultOpt.id;
    instance.current.addSlot(list, id, slotAttribute.className || 'text-center');
    if (show && instance.current) {
      instance.current.show();
    }
  }

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

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

    return _extends({}, otherProps);
  }

  // context
  var context = useContext(Context) || {};
  var locale = context.locale || {};
  // 剔除掉onClick事件, 因为在instance时已经回调了
  var otherMaskAttribute = filterProps(maskAttribute);
  var otherSubmitAttribute = filterProps(submitAttribute);
  var otherCancelAttribute = filterProps(cancelAttribute);
  return createPortal(React.createElement(
    'div',
    _extends({ ref: refEl }, otherMaskAttribute, { className: 'mask picker-mask' + (otherMaskAttribute.className ? ' ' + otherMaskAttribute.className : '') }),
    React.createElement(
      'div',
      _extends({}, others, { className: 'picker' + (others.className ? ' ' + others.className : '') }),
      React.createElement(
        'div',
        { className: 'picker-header' },
        React.createElement(
          'a',
          _extends({}, otherCancelAttribute, { className: 'picker-cancel' + (otherCancelAttribute.className ? ' ' + otherCancelAttribute.className : '') }),
          otherCancelAttribute.caption || locale['cancel'] || '取消'
        ),
        React.createElement(
          'a',
          _extends({}, otherSubmitAttribute, { className: 'picker-submit' + (otherSubmitAttribute.className ? ' ' + otherSubmitAttribute.className : '') }),
          otherSubmitAttribute.caption || locale['finish'] || '完成'
        )
      ),
      React.createElement(
        'div',
        { className: 'picker-wrapper' },
        React.createElement(
          'div',
          { className: 'picker-layer' },
          React.createElement('div', { className: 'picker-layer-frame' })
        ),
        React.createElement('div', { className: 'picker-slotbox' })
      )
    )
  ), portal || context.portal || document.getElementById('root') || document.body);
});

export default React.memo(Picker, function (prevProps, nextProps) {
  if (nextProps.show === prevProps.show) return true;
  return false;
});