import _Select from "@alifd/next/es/select";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
import { project } from '@alilc/lowcode-engine';
import './index.less';
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.state = {
      dataSource: [],
      selectValue: ''
    };
    _this.getClassNameList = function () {
      var _ClassNameView$defaul, _ClassNameView$defaul2;
      var schema = (ClassNameView === null || ClassNameView === void 0 ? void 0 : (_ClassNameView$defaul = ClassNameView.defaultProps) === null || _ClassNameView$defaul === void 0 ? void 0 : (_ClassNameView$defaul2 = _ClassNameView$defaul.getSchema) === null || _ClassNameView$defaul2 === void 0 ? void 0 : _ClassNameView$defaul2.call(_ClassNameView$defaul)) || project.exportSchema();
      var css = schema.componentsTree[0].css;
      return (css === null || css === void 0 ? void 0 : css.match(/(?<=\.)\w+(?=\s*[{,])/g)) || [];
    };
    _this.setClassNameSetterData = function () {
      var _value$split;
      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 = (value === null || value === void 0 ? void 0 : (_value$split = value.split) === null || _value$split === void 0 ? void 0 : _value$split.call(value, ' ')) || [];
      selectValue.forEach(function (current) {
        if (!classNameList.some(function (cls) {
          return cls === current;
        })) {
          dataSource.push({
            value: current,
            label: current
          });
        }
      });
      _this.setState({
        dataSource: dataSource,
        selectValue: selectValue
      });
    };
    _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;
  _proto.componentWillMount = function componentWillMount() {
    this.setClassNameSetterData();
  };
  _proto.render = function render() {
    var _this$state = this.state,
      dataSource = _this$state.dataSource,
      selectValue = _this$state.selectValue;
    return /*#__PURE__*/React.createElement(_Select, {
      className: "ClassNameSetter_Select",
      style: {
        width: '100%'
      },
      mode: "multiple",
      dataSource: dataSource,
      onFocus: this.setClassNameSetterData,
      onChange: this.handleChange,
      value: selectValue
    });
  };
  return ClassNameView;
}(PureComponent);
ClassNameView.display = 'ClassName';
ClassNameView.defaultProps = {};
export { ClassNameView as default };