import _Select from "@alifd/next/es/select";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import './index.less';
var _AliLowCodeEngine = AliLowCodeEngine,
  project = _AliLowCodeEngine.project;
var ClassNameView = /*#__PURE__*/function (_PureComponent) {
  function ClassNameView() {
    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.getClassNameList = function () {
      var schema = project.exportSchema();
      var css = schema.componentsTree[0].css;
      var classNameList = [];
      if (css) {
        var re = /\.?\w+[^{]+\{[^}]*\}/g;
        var list = css.match(re);
        list === null || list === void 0 ? void 0 : list.map(function (item) {
          if (item[0] === '.') {
            var className = item.substring(1, item.indexOf('{'));
            if (className.indexOf(':') >= 0) {
              className = item.substring(1, item.indexOf(':'));
            }
            // 移除左右两边空格
            className = className.replace(/^\s*|\s*$/g, '');
            classNameList.push(className);
          }
          return item;
        });
      }
      return classNameList;
    };
    _this.handleChange = function (value) {
      var onChange = _this.props.onChange;
      onChange(value.join(' '));
      _this.setState({
        selectValue: value
      });
    };
    return _this;
  }
  _inheritsLoose(ClassNameView, _PureComponent);
  var _proto = ClassNameView.prototype;
  // eslint-disable-next-line react/no-deprecated
  _proto.componentWillMount = function componentWillMount() {
    var value = this.props.value;
    var classnameList = this.getClassNameList();
    var dataSource = [];
    classnameList.map(function (item) {
      dataSource.push({
        value: item,
        label: item
      });
      return item;
    });
    var selectValue = [];
    if (value && value !== '') {
      selectValue = value.split(' ');
    }
    this.setState({
      dataSource: dataSource,
      selectValue: selectValue
    });
  };
  _proto.render = function render() {
    var _ref = this.state,
      dataSource = _ref.dataSource,
      selectValue = _ref.selectValue;
    return /*#__PURE__*/React.createElement(_Select, {
      size: "small",
      style: {
        width: '100%'
      },
      "aria-label": "tag mode",
      mode: "tag",
      dataSource: dataSource,
      onChange: this.handleChange,
      value: selectValue
    });
  };
  return ClassNameView;
}(PureComponent);
ClassNameView.display = 'ClassName';
ClassNameView.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.string
};
ClassNameView.defaultProps = {
  onChange: function onChange() {},
  value: ''
};
export { ClassNameView as default };