import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { r as regenerator } from '../_verture/index-beef914f.js';
import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useCallback, useEffect, useImperativeHandle } from 'react';
import RcCascader from 'rc-cascader';
import Right from '@iam-com/icons/Right';
import LoadingIcon from '@iam-com/icons/Loading';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import clsx from 'clsx';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '@para-ui/core/GlobalContext';

var en = {
  placeholder: 'Please select'
};

var zh = {
  placeholder: '请选择'
};

var localeJson = {
  zh: zh,
  en: en
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-cascader input {\n  color: #333;\n  width: 560px;\n  padding: 6px 12px;\n  overflow: hidden;\n  box-sizing: border-box;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  border-radius: 4px;\n  border: 1px solid #d9d9d9;\n}\n.paraui-v3-cascader button {\n  background: transparent;\n  border: none;\n}\n.paraui-v3-cascader.component-cascader-dropdown-hidden {\n  display: none;\n}\n.paraui-v3-cascader .component-cascader-menus {\n  font-size: 12px;\n  overflow: hidden;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);\n  white-space: nowrap;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter, .paraui-v3-cascader .component-cascader-menus.slide-up-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n  animation-play-state: paused;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 1;\n  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n  animation-play-state: paused;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter.slide-up-enter-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft, .paraui-v3-cascader .component-cascader-menus.slide-up-appear.slide-up-appear-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpIn;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter.slide-up-enter-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft, .paraui-v3-cascader .component-cascader-menus.slide-up-appear.slide-up-appear-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft {\n  animation-name: SlideDownIn;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave.slide-up-leave-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpOut;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave.slide-up-leave-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft {\n  animation-name: SlideDownOut;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menu {\n  display: inline-block;\n  min-width: 100px;\n  height: 192px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border-right: 1px solid #e9e9e9;\n  overflow: auto;\n}\n.paraui-v3-cascader .component-cascader-menu:last-child {\n  border-right: 0;\n}\n.paraui-v3-cascader .component-cascader-menu-item {\n  height: 32px;\n  line-height: 32px;\n  padding: 0 16px;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s ease;\n  position: relative;\n}\n.paraui-v3-cascader .component-cascader-menu-item:hover {\n  background: rgba(171, 176, 185, 0.231372549);\n}\n.paraui-v3-cascader .component-cascader-menu-item-disabled {\n  cursor: not-allowed;\n  color: #ccc;\n}\n.paraui-v3-cascader .component-cascader-menu-item-disabled:hover {\n  background: transparent;\n}\n.paraui-v3-cascader .component-cascader-menu-item-active {\n  color: #3666d6;\n}\n.paraui-v3-cascader .component-cascader-menu-item-loading-icon {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon {\n  font-size: 12px;\n  margin-left: 10px;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon SVG {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon SVG path {\n  fill: #999;\n}\n\n.component-cascader-dropdown {\n  position: absolute;\n}\n\n@keyframes SlideUpIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideUpOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n}\n@keyframes SlideDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideDownOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n}";
styleInject(css_248z);

var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
  var data = props.data,
    _props$expandTrigger = props.expandTrigger,
    expandTrigger = _props$expandTrigger === void 0 ? "click" : _props$expandTrigger,
    _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    onChange = props.onChange,
    onDropdownVisibleChange = props.onDropdownVisibleChange,
    _props$changeOnSelect = props.changeOnSelect,
    changeOnSelect = _props$changeOnSelect === void 0 ? false : _props$changeOnSelect,
    _props$expandIcon = props.expandIcon,
    expandIcon = _props$expandIcon === void 0 ? jsx(Right, {}) : _props$expandIcon,
    _props$expandJoin = props.expandJoin,
    expandJoin = _props$expandJoin === void 0 ? " , " : _props$expandJoin,
    _props$fieldNames = props.fieldNames,
    fieldNames = _props$fieldNames === void 0 ? {
      label: "label",
      value: "value",
      children: "children"
    } : _props$fieldNames,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    placeholder = props.placeholder,
    _props$loadData = props.loadData,
    loadData = _props$loadData === void 0 ? function () {
      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
        return regenerator.wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
    } : _props$loadData,
    _props$loadingIcon = props.loadingIcon,
    loadingIcon = _props$loadingIcon === void 0 ? jsx(LoadingIcon, {}) : _props$loadingIcon,
    children = props.children,
    dropdownClassName = props.dropdownClassName,
    className = props.className;
  var intl = useFormatMessage("Cascader", localeJson);
  var _useState = useState(data),
    _useState2 = _slicedToArray(_useState, 2),
    option = _useState2[0],
    setOption = _useState2[1];
  var _useState3 = useState(value),
    _useState4 = _slicedToArray(_useState3, 2),
    inputValue = _useState4[0],
    setValue = _useState4[1];
  var _useState5 = useState(valueToLabel(data, value, expandJoin)),
    _useState6 = _slicedToArray(_useState5, 2),
    inputLabel = _useState6[0],
    setLabel = _useState6[1];
  var onStateChange = useCallback(function (value, selectedOptions) {
    setValue(value);
    setLabel(selectedOptions.map(function (o) {
      return o.label;
    }).join(expandJoin));
    onChange && onChange(value, selectedOptions);
  }, []);
  var loadingData = function loadingData(opt) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
      return regenerator.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.next = 2;
            return loadData(opt);
          case 2:
            setOption(_toConsumableArray(data));
          case 3:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
  };
  var casCls = function casCls() {
    var cls = clsx($prefixCls + "-cascader", className);
    return cls;
  };
  var dropdownCls = function dropdownCls() {
    var cls = clsx($prefixCls + "-cascader", dropdownClassName);
    return cls;
  };
  useEffect(function () {
    setValue(value);
  }, [value]);
  useEffect(function () {
    setLabel(valueToLabel(data, value, expandJoin));
  }, [data, value, expandJoin]);
  useImperativeHandle(ref, function () {
    return {
      clearValue: function clearValue() {
        setValue([]);
        setLabel("");
      }
    };
  });
  return jsx("div", Object.assign({
    className: casCls()
  }, {
    children: jsx(RcCascader, Object.assign({
      options: option,
      onChange: onStateChange,
      changeOnSelect: changeOnSelect,
      expandTrigger: expandTrigger,
      expandIcon: expandIcon,
      fieldNames: fieldNames,
      loadData: loadingData,
      loadingIcon: loadingIcon,
      onDropdownVisibleChange: onDropdownVisibleChange,
      value: inputValue,
      prefixCls: $rcPrefixCls + "-cascader",
      dropdownClassName: dropdownCls()
    }, {
      children: children ? jsx("button", Object.assign({
        disabled: disabled
      }, {
        children: children
      })) : jsx("input", {
        value: inputLabel,
        readOnly: true,
        disabled: disabled,
        placeholder: placeholder || intl({
          id: "placeholder"
        })
      })
    }))
  }));
});
function valueToLabel(opt, value, expandJoin) {
  var label = [];
  var count = 0;
  function find(data) {
    if (!Array.isArray(data)) return;
    for (var i = 0; i < data.length; i++) {
      if (data[i].value === value[count]) {
        if (i === data.length - 1) {
          label.push(data[i].label);
        } else {
          count++;
          label.push(data[i].label);
          find(data[i].children);
        }
      }
    }
    return label;
  }
  find(opt);
  return label.join(expandJoin);
}

export { Cascader, Cascader as default };
