import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Input from "@alifd/next/es/input";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import React, { Component, useEffect, useState, useContext } from "react";
import { FlowEventSelectType } from "../../type";
import BoxSlotComponent from "../../../../_components/boxSlotComponent";
import { t } from "../../../../../../src/locale";
import { getFlowEventOptions, getFlowEventOptionsBySchema } from "../../utils";
import { FlowContext } from "../../../context";
var EventFlowSetterPanel = function EventFlowSetterPanel(props) {
  var FlowCtx = useContext(FlowContext);
  var current = props.current,
    onChange = props.onChange;
  var _useState = useState(current.config || {
      type: FlowEventSelectType.current,
      flowComponentKey: '',
      parentFlowEventNameList: []
    }),
    extendFlowEvent = _useState[0],
    setExtendFlowEvent = _useState[1];
  var _useState2 = useState([]),
    flowEventList = _useState2[0],
    setFlowEventList = _useState2[1];
  var flowEventSelectOptions = getFlowEventOptions();
  useEffect(function () {
    var _current$config;
    var list = getFlowEventOptionsBySchema(FlowCtx.componentKey);
    setFlowEventList(list);

    // 兼容之前数据
    if (((_current$config = current.config) === null || _current$config === void 0 ? void 0 : _current$config.type) === undefined) {
      setExtendFlowEvent(_extends({}, extendFlowEvent, {
        type: FlowEventSelectType.current,
        parentFlowEventNameList: []
      }));
    }
  }, []);
  var handleChange = function handleChange(e) {
    setExtendFlowEvent(_extends({}, extendFlowEvent, {
      flowComponentKey: e
    }));
    var obj = _extends({}, current, {
      config: _extends({}, current.config, {
        flowComponentKey: e
      })
    });
    onChange(obj);
  };
  var handleFlowEventType = function handleFlowEventType(e) {
    setExtendFlowEvent(_extends({}, extendFlowEvent, {
      type: e
    }));
    var obj = _extends({}, current, {
      config: _extends({}, current.config, {
        type: e
      })
    });
    onChange(obj);
  };
  var handleFlowEventName = function handleFlowEventName(e, index) {
    var oldList = getOldArr();
    oldList[index] = e;
    updatedParentFlowEventList(oldList);
  };
  var deleteArr = function deleteArr(index) {
    var oldList = getOldArr();
    oldList.splice(index, 1);
    updatedParentFlowEventList(oldList);
  };
  var addSelectOne = function addSelectOne() {
    var oldList = getOldArr();
    oldList.push("");
    updatedParentFlowEventList(oldList);
  };
  function updatedParentFlowEventList(list) {
    setExtendFlowEvent(_extends({}, extendFlowEvent, {
      parentFlowEventNameList: list
    }));
    var obj = _extends({}, current, {
      config: _extends({}, current.config, {
        parentFlowEventNameList: list
      })
    });
    onChange(obj);
  }
  function getOldArr() {
    return Object.assign([], extendFlowEvent.parentFlowEventNameList);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "condition-box"
  }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.flowEventOrigin")
  }, /*#__PURE__*/React.createElement(_Select, {
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    showSearch: true,
    value: extendFlowEvent.type,
    dataSource: flowEventSelectOptions,
    onChange: function onChange(e) {
      handleFlowEventType(e);
    }
  })), extendFlowEvent.type === FlowEventSelectType.current && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.flowMenusEventFlow")
  }, /*#__PURE__*/React.createElement(_Select, {
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    showSearch: true,
    value: extendFlowEvent.flowComponentKey,
    dataSource: flowEventList,
    onChange: function onChange(e) {
      handleChange(e);
    }
  })), extendFlowEvent.type === FlowEventSelectType.parent && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "parentFlowEventNameListCenter"
  }, extendFlowEvent.parentFlowEventNameList.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "parentFlowEventListItem"
    }, /*#__PURE__*/React.createElement("div", null, t("setter.parentFlowEventNameList")), /*#__PURE__*/React.createElement("div", {
      style: {
        width: '368px'
      }
    }, /*#__PURE__*/React.createElement(_Input, {
      value: item,
      style: {
        width: 100 + "%"
      },
      placeholder: t("setter.inputPlaceHolder"),
      onChange: function onChange(v) {
        handleFlowEventName(v, index);
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "one_btn"
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "ashbin",
      size: "small",
      onClick: function onClick() {
        deleteArr(index);
      }
    }))));
  })), /*#__PURE__*/React.createElement("div", {
    className: "sub_btn"
  }, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    onClick: addSelectOne
  }, /*#__PURE__*/React.createElement("span", null, t("setter.addData"))))));
};
var _default = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(EventFlowSetterPanel, this.props);
  };
  return _default;
}(Component);
export { _default as default };