import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["mode", "forceInline"];
import * as React from 'react';
import { Component, Fragment } from 'react';
import { common } from '@alilc/lowcode-engine';
import CustomIcon from '../../components/custom-icon';
import './index.less';
var editorCabin = common.editorCabin,
  skeletonCabin = common.skeletonCabin,
  designerCabin = common.designerCabin;
var Title = editorCabin.Title;
var isSettingField = designerCabin.isSettingField;
var createSettingFieldView = skeletonCabin.createSettingFieldView,
  PopupContext = skeletonCabin.PopupContext;
var ObjectSetter = /*#__PURE__*/function (_Component) {
  function ObjectSetter() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(ObjectSetter, _Component);
  var _proto = ObjectSetter.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      mode = _this$props.mode,
      _this$props$forceInli = _this$props.forceInline,
      forceInline = _this$props$forceInli === void 0 ? 0 : _this$props$forceInli,
      props = _objectWithoutPropertiesLoose(_this$props, _excluded);
    if (forceInline || mode === 'popup') {
      if (forceInline > 2 || mode === 'popup') {
        // popup
        return /*#__PURE__*/React.createElement(RowSetter, _extends({}, props, {
          primaryButton: !forceInline
        }));
      } else {
        return /*#__PURE__*/React.createElement(RowSetter, _extends({
          columns: forceInline > 1 ? 2 : 4
        }, props));
      }
    } else {
      // form
      return /*#__PURE__*/React.createElement(FormSetter, props);
    }
  };
  return ObjectSetter;
}(Component);
export { ObjectSetter as default };
function getItemsFromProps(props, state) {
  var config = props.config,
    field = props.field,
    columns = props.columns;
  var extraProps = field.extraProps;
  var items = [];
  if (columns && config !== null && config !== void 0 && config.items) {
    var l = Math.min(config.items.length, columns);
    var _loop = function _loop() {
      var _conf$setter;
      var conf = config.items[i];
      if (conf.isRequired || conf.important || (_conf$setter = conf.setter) !== null && _conf$setter !== void 0 && _conf$setter.isRequired) {
        var _state$items, _state$items$filter;
        var item = (state === null || state === void 0 ? void 0 : (_state$items = state.items) === null || _state$items === void 0 ? void 0 : (_state$items$filter = _state$items.filter(function (d) {
          return d.name === conf.name;
        })) === null || _state$items$filter === void 0 ? void 0 : _state$items$filter[0]) || field.createField(_extends({}, conf, {
          // in column-cell
          forceInline: 3
        }));
        var originalSetValue = item.extraProps.setValue;
        item.extraProps.setValue = function () {
          var _extraProps$setValue;
          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
          }
          // 调用子字段本身的 setValue
          originalSetValue === null || originalSetValue === void 0 ? void 0 : originalSetValue.apply(null, args);
          // 调用父字段本身的 setValue
          (_extraProps$setValue = extraProps.setValue) === null || _extraProps$setValue === void 0 ? void 0 : _extraProps$setValue.apply(null, args);
        };
        items.push(item);
      }
      if (items.length >= l) {
        return 1; // break
      }
    };
    for (var i = 0; i < config.items.length; i++) {
      if (_loop()) break;
    }
  }
  return items;
}
var RowSetter = /*#__PURE__*/function (_Component2) {
  function RowSetter(props) {
    var _this;
    _this = _Component2.call(this, props) || this;
    _this.state = {
      descriptor: '',
      items: []
    };
    _this.pipe = void 0;
    var descriptor = props.descriptor,
      field = props.field;
    var items = getItemsFromProps(props);
    _this.state = {
      items: items
    };
    var firstRun = true;
    field.onEffect(function () {
      var state = {};
      if (descriptor) {
        if (typeof descriptor === 'function') {
          state.descriptor = descriptor(field);
        } else {
          state.descriptor = field.getPropValue(descriptor);
        }
      } else {
        state.descriptor = field.title;
      }
      if (firstRun) {
        firstRun = false;
        _this.state = state;
      } else {
        _this.setState(state);
      }
    });
    return _this;
  }
  _inheritsLoose(RowSetter, _Component2);
  RowSetter.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
    return {
      items: getItemsFromProps(props, state)
    };
  };
  var _proto2 = RowSetter.prototype;
  _proto2.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    if (this.state.descriptor !== nextState.descriptor) {
      return true;
    }
    if (this.props.value !== nextProps.value) {
      return true;
    }
    return false;
  };
  _proto2.render = function render() {
    var _this2 = this;
    var items = this.state.items;
    var _this$props2 = this.props,
      field = _this$props2.field,
      config = _this$props2.config;
    if (!this.pipe) {
      this.pipe = this.context.create({
        width: 320,
        canCloseByOutSideClick: config.canCloseByOutSideClick
      });
    }
    var title = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Title, {
      title: this.state.descriptor
    }));
    this.pipe.send( /*#__PURE__*/React.createElement(FormSetter, {
      key: field.id,
      field: field,
      config: config
    }), title);
    if (items && items.length) {
      return /*#__PURE__*/React.createElement("div", {
        className: "lc-setter-object-row"
      }, /*#__PURE__*/React.createElement(_Button, {
        className: "lc-setter-object-row-edit",
        size: "small",
        ghost: "light",
        onClick: function onClick(e) {
          _this2.pipe.show(e.target, field.id);
        }
      }, /*#__PURE__*/React.createElement(CustomIcon, {
        type: "icon-ic_edit"
      })), /*#__PURE__*/React.createElement("div", {
        className: "lc-setter-object-row-body"
      }, items.map(function (item) {
        return createSettingFieldView(item, field);
      })));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "lc-setter-object-row"
    }, /*#__PURE__*/React.createElement(_Button, {
      className: "lc-setter-object-row-edit",
      size: "small",
      ghost: "light",
      onClick: function onClick(e) {
        _this2.pipe.show(e.target, field.id);
      }
    }, /*#__PURE__*/React.createElement(CustomIcon, {
      type: "icon-ic_edit"
    })), /*#__PURE__*/React.createElement("div", {
      className: "lc-setter-object-row-body"
    }, this.state.descriptor, "\uFF1A\u672A\u914D\u7F6E\u5FEB\u6377\u7F16\u8F91\u9879"));
  };
  return RowSetter;
}(Component);
RowSetter.contextType = PopupContext;
var FormSetter = /*#__PURE__*/function (_Component3) {
  function FormSetter(props) {
    var _this3;
    _this3 = _Component3.call(this, props) || this;
    _this3.items = void 0;
    var config = props.config,
      field = props.field;
    var extraProps = field.extraProps;
    if (Array.isArray(field.items) && field.items.length > 0) {
      field.items.forEach(function (item) {
        if (isSettingField(item)) {
          var originalSetValue = item.extraProps.setValue;
          item.extraProps.setValue = function () {
            var _extraProps$setValue2;
            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
              args[_key2] = arguments[_key2];
            }
            // 调用子字段本身的 setValue
            originalSetValue === null || originalSetValue === void 0 ? void 0 : originalSetValue.apply(null, args);
            // 调用父字段本身的 setValue
            (_extraProps$setValue2 = extraProps.setValue) === null || _extraProps$setValue2 === void 0 ? void 0 : _extraProps$setValue2.apply(null, args);
          };
        }
      });
      _this3.items = field.items;
    } else {
      _this3.items = ((config === null || config === void 0 ? void 0 : config.items) || []).map(function (conf) {
        return field.createField(_extends({}, conf, {
          setValue: extraProps === null || extraProps === void 0 ? void 0 : extraProps.setValue
        }));
      });
    }
    // TODO: extraConfig for custom fields
    return _this3;
  }
  _inheritsLoose(FormSetter, _Component3);
  var _proto3 = FormSetter.prototype;
  _proto3.render = function render() {
    var field = this.props.field;
    return /*#__PURE__*/React.createElement("div", {
      className: "lc-setter-object lc-block-setter"
    }, this.items.map(function (item, index) {
      return createSettingFieldView(item, field, index);
    }));
  };
  return FormSetter;
}(Component);