var _excluded = ["portal", "data", "dataFormat", "split", "type", "show", "value", "selected", "maskAttribute", "submitAttribute", "cancelAttribute", "onScrollEnd"],
    _excluded2 = ["caption", "onClick"];

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { forwardRef, useRef, useImperativeHandle, useContext, useEffect } from 'react';
import { createPortal } from 'react-dom';
import treeData from './../PickerDistrict/china.js';
import Instance from './instance.js';
import Context from '../Context/instance.js';
var PickerCity = forwardRef(function (_ref, ref) {
  var portal = _ref.portal,
      data = _ref.data,
      _ref$dataFormat = _ref.dataFormat,
      dataFormat = _ref$dataFormat === void 0 ? {
    // {idPropertyName: 'id', namePropertyName: 'name', childPropertyName: 'children'}
    idPropertyName: 'id',
    namePropertyName: 'name',
    childPropertyName: 'children'
  } : _ref$dataFormat,
      _ref$split = _ref.split,
      split = _ref$split === void 0 ? '-' : _ref$split,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'district' : _ref$type,
      _ref$show = _ref.show,
      show = _ref$show === void 0 ? false : _ref$show,
      value = _ref.value,
      selected = _ref.selected,
      _ref$maskAttribute = _ref.maskAttribute,
      maskAttribute = _ref$maskAttribute === void 0 ? {} : _ref$maskAttribute,
      _ref$submitAttribute = _ref.submitAttribute,
      submitAttribute = _ref$submitAttribute === void 0 ? {} : _ref$submitAttribute,
      _ref$cancelAttribute = _ref.cancelAttribute,
      cancelAttribute = _ref$cancelAttribute === void 0 ? {} : _ref$cancelAttribute,
      onScrollEnd = _ref.onScrollEnd,
      others = _objectWithoutPropertiesLoose(_ref, _excluded);

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

  var context = useContext(Context) || {};

  var locale = context.locale || function (remark) {
    return remark || '';
  };

  useEffect(function () {
    initInstance();
  }, []); // eslint-disable-line

  useEffect(function () {
    if (!instance.current) return;

    if (show) {
      if (data) {
        instance.current.setData(data, {
          childPropertyName: dataFormat.childPropertyName,
          idPropertyName: dataFormat.idPropertyName,
          namePropertyName: dataFormat.namePropertyName
        });
      }

      setDefault();
      instance.current.show();
    } else {
      instance.current.hide();
    }
  }, [show]); // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects

  if (instance.current) {
    instance.current.params.onClickSubmit = clickSubmit;
    instance.current.params.onClickCancel = clickCancel;
    instance.current.params.onClickMask = clickMask;
  }

  function clickSubmit(e) {
    // 获取选中项
    e.activeText = e.getActiveText(e.activeOptions);
    e.setActiveKeys(e.activeOptions); // Callback

    var value = e.activeText;
    var options = e.activeOptions;
    if (submitAttribute.onClick) submitAttribute.onClick(e, value, options);
  }

  function clickCancel(e) {
    if (cancelAttribute.onClick) cancelAttribute.onClick(e);
  }

  function clickMask(e) {
    if (maskAttribute.onClick) maskAttribute.onClick(e);
  }

  function scrollEnd(e) {
    // var activeOption = e.activeSlot.values[e.activeSlot.activeIndex]
    var activeOption = e.activeOptions[e.activeSlot.index];

    if (e.activeSlot.index === 0) {
      // 滚动省
      var city = e.replaceCity(activeOption[e.params.idPropertyName]); // 修改第二项

      e.replaceDistrict(city[0][e.params.idPropertyName]); // 修改第三项
    } else if (e.activeSlot.index === 1) {
      // 滚动市
      e.replaceDistrict(activeOption[e.params.idPropertyName]); // 修改第三项
    } // Callback


    if (onScrollEnd) onScrollEnd(e);
  }

  function setDefault() {
    if (selected && selected.length) {
      instance.current.setDefaultKeys(selected.map(function (item) {
        return item.id;
      }));
    } else {
      var defaultValues = getDefaultValues();
      instance.current.setDefaultValues(defaultValues);
    }

    instance.current.update();
  }

  function getDefaultValues() {
    // 默认值
    var defaultValue = value;
    var defaultValues = [];

    if (defaultValue) {
      defaultValues = defaultValue.split(split).map(function (item) {
        return item.trim();
      });
    }

    return defaultValues;
  }

  function getDefaultKeys() {
    if (selected && selected.length > 1) {
      return selected.map(function (item) {
        return item.id;
      });
    }

    return ['', '', ''];
  }

  function initInstance() {
    var defaultValues = getDefaultValues();
    var defaultKeys = getDefaultKeys(); // render数据

    instance.current = new Instance({
      data: data || treeData,
      idPropertyName: dataFormat.idPropertyName,
      namePropertyName: dataFormat.namePropertyName,
      childPropertyName: dataFormat.childPropertyName,
      mask: refEl.current,
      split: split,
      viewType: type,
      defaultProvinceKey: defaultKeys[0] || '',
      defaultCityKey: defaultKeys[1] || '',
      defaultDistrictKey: defaultKeys[2] || '',
      defaultProvince: defaultValues[0] || '',
      defaultCity: defaultValues[1] || '',
      defaultDistrict: defaultValues[2] || '',
      onClickMask: clickMask,
      onClickCancel: clickCancel,
      onClickSubmit: clickSubmit,
      onScrollEnd: scrollEnd,
      onHid: function onHid(e) {}
    });

    if (show && instance.current) {
      setTimeout(function () {
        instance.current.show();
      }, 10);
    }
  } // 过滤已经回调的属性


  function filterProps(props) {
    if (!props) return {};

    var caption = props.caption,
        onClick = props.onClick,
        otherProps = _objectWithoutPropertiesLoose(props, _excluded2);

    return _extends({}, otherProps);
  } // 剔除掉onClick事件, 因为在instance时已经回调了


  var otherMaskAttribute = filterProps(maskAttribute);
  var otherSubmitAttribute = filterProps(submitAttribute);
  var otherCancelAttribute = filterProps(cancelAttribute);
  return createPortal( /*#__PURE__*/React.createElement("div", _extends({
    ref: refEl
  }, otherMaskAttribute, {
    className: "mask picker-mask" + (otherMaskAttribute.className ? ' ' + otherMaskAttribute.className : '')
  }), /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: "picker" + (others.className ? ' ' + others.className : '')
  }), /*#__PURE__*/React.createElement("div", {
    className: "picker-header"
  }, /*#__PURE__*/React.createElement("a", _extends({}, otherCancelAttribute, {
    className: "picker-cancel" + (cancelAttribute.className ? ' ' + cancelAttribute.className : '')
  }), cancelAttribute.caption || locale('取消', 'cancel')), /*#__PURE__*/React.createElement("div", {
    className: "picker-header-title"
  }), /*#__PURE__*/React.createElement("a", _extends({}, otherSubmitAttribute, {
    className: "picker-submit" + (submitAttribute.className ? ' ' + submitAttribute.className : '')
  }), submitAttribute.caption || locale('完成', 'finish'))), /*#__PURE__*/React.createElement("div", {
    className: "picker-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "picker-layer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "picker-layer-frame"
  })), /*#__PURE__*/React.createElement("div", {
    className: "picker-slotbox"
  })))), portal || context.portal || document.getElementById('root') || document.body);
});
export default React.memo(PickerCity, function (prevProps, nextProps) {
  if (nextProps.show === prevProps.show) return true;
  return false;
});