import _Dialog from "@alifd/next/es/dialog";
import _Tab from "@alifd/next/es/tab";
import _Input from "@alifd/next/es/input";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Balloon from "@alifd/next/es/balloon";
import * as React from "react";
import "./index.scss";
import * as ICons from "@ant-design/icons";
var IconMap = new Map();
for (var _i = 0, _Object$keys = Object.keys(ICons); _i < _Object$keys.length; _i++) {
  var key = _Object$keys[_i];
  // @ts-ignore
  var item = ICons[key];
  IconMap.set(key, item);
}
var Tooltip = _Balloon.Tooltip;
var items = [{
  key: "Outlined",
  title: "线框风格"
}, {
  key: "Filled",
  title: "实底风格"
}, {
  key: "TwoTone",
  title: "双色风格"
}];
var AntIconSetter = /*#__PURE__*/function (_React$PureComponent) {
  function AntIconSetter(props) {
    var _this;
    _this = _React$PureComponent.call(this, props) || this;
    _this.onOpen = void 0;
    _this.onClose = void 0;
    _this.state = {
      visible: false
    };
    _this.state = {
      visible: false
    };
    _this.onOpen = function () {
      _this.setState({
        visible: true
      });
    };
    _this.onClose = function () {
      _this.setState({
        visible: false
      });
    };
    return _this;
  }
  _inheritsLoose(AntIconSetter, _React$PureComponent);
  var _proto = AntIconSetter.prototype;
  _proto.componentDidMount = function componentDidMount() {};
  _proto.render = function render() {
    var _this2 = this;
    var _this$props = this.props,
      value = _this$props.value,
      onChange = _this$props.onChange;
    var trigger = /*#__PURE__*/React.createElement(_Input, {
      style: {
        width: "100%"
      },
      value: value,
      readOnly: true,
      onClick: this.onOpen
    });
    var tab = /*#__PURE__*/React.createElement(_Tab, null, items.map(function (item) {
      return /*#__PURE__*/React.createElement(_Tab.Item, {
        title: item.title,
        key: item.key
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          display: "flex",
          flexWrap: "wrap",
          fontSize: 24,
          lineHeight: 1,
          maxHeight: 600,
          overflowY: "auto"
        }
      }, [].concat(IconMap.keys()).filter(function (key) {
        return key.endsWith(item.key);
      }).map(function (key) {
        var Comp = IconMap.get(key);
        return /*#__PURE__*/React.createElement("div", {
          className: "icon-setter-select-item",
          onClick: function onClick() {
            onChange === null || onChange === void 0 ? void 0 : onChange(key);
            _this2.onClose();
          }
        }, /*#__PURE__*/React.createElement(Tooltip, {
          align: "t",
          trigger: /*#__PURE__*/React.createElement(Comp, null)
        }, key));
      })));
    }));
    return /*#__PURE__*/React.createElement("div", null, trigger, /*#__PURE__*/React.createElement(_Dialog, {
      v2: true,
      footer: false,
      wrapperStyle: {
        padding: 0
      },
      visible: this.state.visible,
      onOk: this.onClose,
      onClose: this.onClose
    }, tab));
  };
  return AntIconSetter;
}(React.PureComponent);
// 声明 Setter 的 title
AntIconSetter.displayName = 'AntIconSetter';
export { AntIconSetter as default };