import _Balloon from "@alifd/next/es/balloon";
import _Input from "@alifd/next/es/input";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';

import './index.less';
import { intl } from './locale';
var icons = ['smile', 'cry', 'success', 'warning', 'prompt', 'error', 'help', 'clock', 'success-filling', 'delete-filling', 'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch', 'sorting', 'descending', 'ascending', 'select', 'semi-select', 'loading', 'search', 'close', 'ellipsis', 'picture', 'calendar', 'ashbin', 'upload', 'download', 'set', 'edit', 'refresh', 'filter', 'attachment', 'account', 'email', 'atm', 'copy', 'exit', 'eye', 'eye-close', 'toggle-left', 'toggle-right', 'lock', 'unlock', 'chart-pie', 'chart-bar', 'form', 'detail', 'list', 'dashboard'];
var IconSetter = /*#__PURE__*/function (_PureComponent) {
  function IconSetter() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
    _this.state = {
      setterValue: null
    };
    _this._onChange = function (icon) {
      var _this$props = _this.props,
        onChange = _this$props.onChange,
        type = _this$props.type;
      if (type === 'string') {
        onChange(icon);
      } else if (type === 'node') {
        onChange === null || onChange === void 0 ? void 0 : onChange({
          componentName: 'Icon',
          props: {
            type: icon
          }
        });
      }
    };
    _this.onInputChange = function (icon) {
      _this._onChange(icon);
    };
    _this.onSelectIcon = function (icon) {
      _this._onChange(icon);
    };
    return _this;
  }
  _inheritsLoose(IconSetter, _PureComponent);
  IconSetter.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    var value = nextProps.value,
      defaultValue = nextProps.defaultValue;
    if (prevState.setterValue == null) {
      if (value === undefined && defaultValue) {
        return {
          setterValue: defaultValue
        };
      }
    }
    return {
      setterValue: value
    };
  };
  var _proto = IconSetter.prototype;
  _proto.render = function render() {
    var _setterValue$props,
      _this2 = this;
    var _this$props2 = this.props,
      placeholder = _this$props2.placeholder,
      hasClear = _this$props2.hasClear;
    var setterValue = this.state.setterValue;
    // @ts-ignore
    var _value = typeof setterValue === 'object' ? setterValue === null || setterValue === void 0 ? void 0 : (_setterValue$props = setterValue.props) === null || _setterValue$props === void 0 ? void 0 : _setterValue$props.type : setterValue;
    var currentIcon = /*#__PURE__*/React.createElement(_Icon, {
      size: "xs",
      type: _value
    });
    var clearIcon = hasClear && /*#__PURE__*/React.createElement(_Icon, {
      size: "xs",
      id: "icon-clear",
      type: "delete-filling",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        _this2.onSelectIcon('');
      }
    });
    var triggerNode = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Input, {
      size: "small",
      placeholder: placeholder,
      addonTextBefore: currentIcon,
      onChange: this.onInputChange,
      value: _value,
      readOnly: true,
      addonTextAfter: clearIcon
    }));
    var InnerBeforeNode = /*#__PURE__*/React.createElement(_Balloon, {
      className: 'lowcode-icon-content',
      trigger: triggerNode,
      needAdjust: true,
      triggerType: "click",
      closable: false,
      alignEdge: true,
      align: "l",
      popupClassName: "lowcode-icon-setter-popup"
    }, /*#__PURE__*/React.createElement("ul", {
      className: "lowcode-icon-list"
    }, icons.map(function (icon) {
      return /*#__PURE__*/React.createElement("li", {
        key: icon,
        onClick: function onClick() {
          return _this2.onSelectIcon(icon);
        }
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: icon,
        size: "medium"
      }));
    })));
    return /*#__PURE__*/React.createElement("div", {
      className: "lc-icon-setter"
    }, InnerBeforeNode);
  };
  return IconSetter;
}(PureComponent);
IconSetter.defaultProps = {
  value: undefined,
  type: 'string',
  defaultValue: '',
  hasClear: true,
  icons: icons,
  placeholder: "" + intl('PleaseClickToSelectIcon'),
  onChange: function onChange() {
    return undefined;
  }
};
IconSetter.displayName = 'IconSetter';
export { IconSetter as default };