"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
var _menu = _interopRequireDefault(require("@alifd/next/lib/menu"));
var _react = require("react");
var _lowcodeEngine = require("@alilc/lowcode-engine");
var _nativeEvents = _interopRequireDefault(require("./native-events"));
require("./index.less");
var Item = _menu["default"].Item,
  Group = _menu["default"].Group;
var RadioGroup = _radio["default"].Group;
var EVENT_CONTENTS = {
  COMPONENT_EVENT: 'componentEvent',
  NATIVE_EVENT: 'nativeEvent',
  LIFE_CYCLE_EVENT: 'lifeCycleEvent'
};
var DEFINITION_EVENT_TYPE = {
  EVENTS: 'events',
  NATIVE_EVENTS: 'nativeEvents',
  LIFE_CYCLE_EVENT: 'lifeCycleEvent'
};
var SETTER_NAME = 'event-setter';
var EventsSetter = exports["default"] = /*#__PURE__*/function (_Component) {
  function EventsSetter() {
    var _this$props, _this$props$value, _this$props2;
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      eventBtns: [],
      eventList: [],
      selectType: null,
      nativeEventList: [],
      lifeCycleEventList: [],
      isRoot: false,
      eventDataList: ((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props$value = _this$props.value) !== null && _this$props$value !== void 0 && _this$props$value.eventDataList ? _this.props.value.eventDataList : (_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.value) || []
    };
    _this.initLifeCycleEventDataList = function () {
      var isRoot = _this.state.isRoot;
      if (isRoot && !_this.props.value) {
        var schema = _lowcodeEngine.project.exportSchema();
        var lifeCycles = schema.componentsTree[0].lifeCycles;
        var eventDataList = [];
        if (lifeCycles) {
          for (var key in lifeCycles) {
            eventDataList.push({
              name: key,
              relatedEventName: key,
              type: EVENT_CONTENTS.LIFE_CYCLE_EVENT
            });
          }
          _this.setState({
            eventDataList: eventDataList
          });
        }
      }
    };
    _this.checkEventListStatus = function (eventList, eventType) {
      var eventDataList = _this.state.eventDataList;
      if (eventType === DEFINITION_EVENT_TYPE.EVENTS || eventType === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
        eventList.map(function (item) {
          item.disabled = false;
          eventDataList.map(function (eventDataItem) {
            if (item.name === eventDataItem.name) {
              item.disabled = true;
            }
            return eventDataItem;
          });
          return item;
        });
      } else if (eventType === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
        eventDataList.map(function (eventDataItem) {
          eventList.map(function (item) {
            item.eventList.map(function (eventItem) {
              if (eventItem.name === eventDataItem.name) {
                item.disabled = true;
              } else {
                item.disabled = false;
              }
              return eventItem;
            });
            return item;
          });
          return eventDataItem;
        });
      }
    };
    /**
     * 渲染事件信息
     */
    _this.renderEventInfoCell = function (value, index, record) {
      var eventTagText = '';
      if (record.type === EVENT_CONTENTS.NATIVE_EVENT) {
        eventTagText = '原';
      } else if (record.type === EVENT_CONTENTS.COMPONENT_EVENT) {
        eventTagText = '组';
      } else if (record.type === EVENT_CONTENTS.LIFE_CYCLE_EVENT) {
        eventTagText = '生';
      }
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "event-cell"
      }, /*#__PURE__*/React.createElement("div", {
        className: "event-type-tag"
      }, eventTagText), record.name), /*#__PURE__*/React.createElement("div", {
        className: "event-cell",
        style: {
          marginTop: '8px'
        }
      }, /*#__PURE__*/React.createElement(_icon["default"], {
        type: "attachment",
        size: "small",
        className: "related-icon"
      }), /*#__PURE__*/React.createElement("span", {
        className: "related-event-name",
        onClick: function onClick() {
          return _this.onRelatedEventNameClick(record.relatedEventName);
        }
      }, record.relatedEventName || '')));
    };
    /**
     * 渲染事件操作项
     */
    _this.renderEventOperateCell = function (rowIndex, colIndex, record) {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_icon["default"], {
        type: "set",
        className: "event-operate-icon",
        style: {
          marginLeft: '3px',
          marginRight: '4px'
        },
        onClick: function onClick() {
          return _this.openDialog(record.relatedEventName, record.name, true);
        }
      }), /*#__PURE__*/React.createElement(_icon["default"], {
        type: "ashbin",
        className: "event-operate-icon",
        onClick: function onClick() {
          return _this.openDeleteEventDialog(record.name);
        }
      }));
    };
    _this.updateEventListStatus = function (eventName, unDisabled) {
      var _this$state = _this.state,
        eventList = _this$state.eventList,
        nativeEventList = _this$state.nativeEventList,
        lifeCycleEventList = _this$state.lifeCycleEventList;
      eventList.map(function (item) {
        if (item.name === eventName) {
          item.disabled = !unDisabled;
        }
        return item;
      });
      lifeCycleEventList.map(function (item) {
        if (item.name === eventName) {
          item.disabled = !unDisabled;
        }
        return item;
      });
      nativeEventList.map(function (item) {
        item.eventList.map(function (itemData) {
          if (itemData.name === eventName) {
            itemData.disabled = !unDisabled;
          }
          return itemData;
        });
        return item;
      });
    };
    _this.onRadioChange = function (value) {
      _this.setState({
        selectType: value
      });
    };
    _this.onEventMenuClick = function (eventName) {
      var _this$state2 = _this.state,
        selectType = _this$state2.selectType,
        eventDataList = _this$state2.eventDataList;
      eventDataList.push({
        type: selectType,
        name: eventName
      });
      _this.setState({
        eventDataList: eventDataList
      });
      _this.updateEventListStatus(eventName);
      _this.closeEventMenu();
      _this.openDialog(eventName, eventName);
    };
    _this.onRelatedEventNameClick = function (eventName) {
      // props 事件，不需要跳转
      if (/(this\.)?props\./.test(eventName)) {
        return;
      }
      _lowcodeEngine.skeleton.showPanel('codeEditor');
      setTimeout(function () {
        _lowcodeEngine.event.emit('codeEditor.focusByFunction', {
          functionName: eventName
        });
      });
      // editor.emit('sourceEditor.focusByFunction',{
      //   functionName:eventName
      // })
    };
    _this.closeEventMenu = function () {
      if (_this.state.selectType !== null) {
        _this.setState({
          selectType: null
        });
      }
    };
    _this.openDeleteEventDialog = function (eventName) {
      _this.deleteEvent(eventName);
      // Dialog.confirm({
      //   title: '删除事件',
      //   content: '确定删除当前事件吗',
      //   onOk: () => this.deleteEvent(eventName),
      // });
    };
    _this.deleteEvent = function (eventName) {
      var _this$state3 = _this.state,
        eventDataList = _this$state3.eventDataList,
        eventList = _this$state3.eventList;
      eventDataList.map(function (item, index) {
        if (item.name === eventName) {
          eventDataList.splice(index, 1);
        }
        return item;
      });
      _this.setState({
        eventDataList: eventDataList
      });
      _this.props.onChange({
        eventDataList: eventDataList,
        eventList: eventList
      });
      _this.updateEventListStatus(eventName, true);
    };
    _this.openDialog = function (relatedEventName, eventName, isEdit) {
      var _this$state4 = _this.state,
        eventDataList = _this$state4.eventDataList,
        eventList = _this$state4.eventList;
      var paramStr;
      var configEventData; // 配置的event信息
      eventDataList.map(function (item) {
        if (item.name == eventName) {
          paramStr = item.paramStr;
        }
        return item;
      });
      eventList.map(function (item) {
        if (item.name == eventName) {
          configEventData = item;
        }
        return item;
      });
      // this.setBindEventName(bindEventName);
      _lowcodeEngine.event.emit('eventBindDialog.openDialog', relatedEventName, SETTER_NAME, paramStr, isEdit, eventName, configEventData);
    };
    _this.bindEvent = function (relatedEventName, paramStr, bindEventName) {
      var _this$state5 = _this.state,
        eventDataList = _this$state5.eventDataList,
        eventList = _this$state5.eventList;
      eventDataList.map(function (item) {
        if (item.name === bindEventName) {
          item.relatedEventName = relatedEventName;
          // if (paramStr) {
          item.paramStr = paramStr;
          // }
        }
        return item;
      });
      _this.setState({
        eventDataList: eventDataList
      });
      _this.props.onChange({
        eventDataList: eventDataList,
        eventList: eventList
      });

      // this.closeDialog();
    };
    return _this;
  }
  (0, _inheritsLoose2["default"])(EventsSetter, _Component);
  var _proto = EventsSetter.prototype;
  // constructor (){
  //   super();
  //   debugger;
  //   // if (!this.props || !this.props.value){
  //   //   this.setState({
  //   //     eventDataList:[]
  //   //   })
  //   // }
  // }
  // static getDerivedStateFromProps(nextProps, prevState) {
  //   debugger;
  //   // const { value } = nextProps;
  //   // debugger;
  //   // if (value !== prevState.eventDataList) {
  //   //   return {
  //   //     value,
  //   //   };
  //   // }
  //   return null;
  // }
  _proto.componentDidMount = function componentDidMount() {
    // console.log(this.state.eventDataList);
    this.initEventBtns();
    this.initEventList();
    _lowcodeEngine.event.on("common:" + SETTER_NAME + ".bindEvent", this.bindEvent);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    _lowcodeEngine.event.off("common:" + SETTER_NAME + ".bindEvent", this.bindEvent);
  };
  /**
   * 初始化事件按钮
   */
  _proto.initEventBtns = function initEventBtns() {
    var definition = this.props.definition;
    var isRoot = false;
    var isCustom = false;
    var eventBtns = [];
    definition.map(function (item) {
      if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
        isRoot = true;
      }
      if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
        isCustom = true;
      }
      return item;
    });
    if (isRoot) {
      eventBtns = [{
        value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
        label: '生命周期'
      }];
    } else if (isCustom) {
      eventBtns = [{
        value: EVENT_CONTENTS.COMPONENT_EVENT,
        label: '组件自带事件'
      }];
    } else {
      eventBtns = [{
        value: EVENT_CONTENTS.NATIVE_EVENT,
        label: '原生事件'
      }];
    }
    this.setState({
      eventBtns: eventBtns,
      isRoot: isRoot
    }, this.initLifeCycleEventDataList);
  };
  _proto.initEventList = function initEventList() {
    var _this2 = this;
    var definition = this.props.definition;
    var nativeEventList = [];
    definition.map(function (item) {
      if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
        _this2.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.EVENTS);
        _this2.setState({
          eventList: item.list
        });
      }
      if (item.type === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
        _this2.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.NATIVE_EVENTS);
        nativeEventList = item.list;
      }
      if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
        _this2.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT);
        _this2.setState({
          lifeCycleEventList: item.list
        });
      }
      return item;
    });
    if (nativeEventList.length == 0) {
      nativeEventList = _nativeEvents["default"];
      this.setState({
        nativeEventList: nativeEventList
      });
    }
  };
  _proto.render = function render() {
    var _this$state6 = this.state,
      eventBtns = _this$state6.eventBtns,
      eventList = _this$state6.eventList,
      nativeEventList = _this$state6.nativeEventList,
      lifeCycleEventList = _this$state6.lifeCycleEventList,
      selectType = _this$state6.selectType,
      eventDataList = _this$state6.eventDataList;
    var showEventList = lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;

    // console.log('eventDataList', eventDataList);

    return /*#__PURE__*/React.createElement("div", {
      className: "lc-block-setter event-body",
      onClick: this.closeEventMenu
    }, /*#__PURE__*/React.createElement("div", {
      className: "event-title"
    }, eventBtns.length > 1 ? /*#__PURE__*/React.createElement("span", null, "\u70B9\u51FB\u9009\u62E9\u4E8B\u4EF6\u7C7B\u578B") : /*#__PURE__*/React.createElement("span", null, "\u70B9\u51FB\u7ED1\u5B9A\u4E8B\u4EF6")), /*#__PURE__*/React.createElement(RadioGroup, {
      dataSource: eventBtns,
      shape: "button",
      size: "medium",
      value: selectType,
      onChange: this.onRadioChange,
      style: {
        width: '100%'
      }
    }), selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && /*#__PURE__*/React.createElement(_menu["default"], {
      defaultOpenKeys: "sub-menu",
      className: "event-menu",
      onItemClick: this.onEventMenuClick,
      style: {
        width: document.body.clientWidth < 1860 ? '256px' : '357px'
      }
    }, showEventList.map(function (item) {
      return /*#__PURE__*/React.createElement(Item, {
        key: item.name,
        helper: item.description,
        disabled: item.disabled
      }, item.name);
    })), selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && /*#__PURE__*/React.createElement(_menu["default"], {
      defaultOpenKeys: "sub-menu",
      className: "event-menu",
      onItemClick: this.onEventMenuClick
    }, nativeEventList.map(function (item, index) {
      return /*#__PURE__*/React.createElement(Group, {
        label: item.name,
        key: index
      }, item.eventList.map(function (groupItem) {
        return /*#__PURE__*/React.createElement(Item, {
          key: groupItem.name,
          disabled: groupItem.disabled
        }, groupItem.name);
      }));
    })), /*#__PURE__*/React.createElement("div", {
      className: "event-table"
    }, /*#__PURE__*/React.createElement(_table["default"], {
      dataSource: eventDataList,
      size: "small"
    }, /*#__PURE__*/React.createElement(_table["default"].Column, {
      title: "\u5DF2\u6709\u4E8B\u4EF6",
      cell: this.renderEventInfoCell
    }), /*#__PURE__*/React.createElement(_table["default"].Column, {
      title: "\u64CD\u4F5C",
      cell: this.renderEventOperateCell,
      width: 70
    }))));
  };
  return EventsSetter;
}(_react.Component);