import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Switch from "@alifd/next/es/switch";
import _CascaderSelect from "@alifd/next/es/cascader-select";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Input from "@alifd/next/es/input";
import _Grid from "@alifd/next/es/grid";
import _Select from "@alifd/next/es/select";
import React, { Component, useState, useEffect, useMemo } from "react";
import { cloneDeep, isArray } from "lodash";
import { filter_source } from "../../_utils/utils";
import { DataSourceType, DefaultInputType, getTupleTypeRelationList } from "../../_utils/formKeyType";
import { LocationUrlType, WalletConnectType } from "../../_utils/treeDataRelationFn/type";
import { getCustomStateRelation, getDataSourceDataRelation, getDictionaryRelation, getEngineRuleRelation, getLoopDataSelectedRelation, getModalDialogRelation, getPageTreeDataRelation, getStorageDataRelation, getUrlRelation, getWalletConnectRelation } from "../cTreeDataRelation-setter/comFn";
import TupleRender from "./tupleRender";
import { t } from "../../../src/locale";
import CJsonDomSetter from "../cJsonDom-setter";
import { JsonDomSelectService } from "../../_utils/jsonDomSelectService";
var Option = _Select.Option;
var Row = _Grid.Row,
  Col = _Grid.Col;
var RenderByFormKeyPage = function RenderByFormKeyPage(props) {
  var value = props.value,
    onChange = props.onChange;
  var jsonDomSelectService = new JsonDomSelectService();
  var _useState = useState((value === null || value === void 0 ? void 0 : value.formKey) || DataSourceType.defaultType),
    formKey = _useState[0],
    setFormKey = _useState[1];
  var _useState2 = useState(value === null || value === void 0 ? void 0 : value.data),
    data = _useState2[0],
    setData = _useState2[1];
  var _useState3 = useState(props.relationOption),
    relationOption = _useState3[0],
    setRelationOption = _useState3[1];
  var _useState4 = useState(false),
    showJsonDom = _useState4[0],
    setShowJsonDom = _useState4[1];
  var _useState5 = useState(''),
    jsonSelectValue = _useState5[0],
    setJsonSelectValue = _useState5[1];
  var _useState6 = useState({}),
    renderJson = _useState6[0],
    setRenderJson = _useState6[1];
  var _useState7 = useState(false),
    dialogVisible = _useState7[0],
    setDialogVisible = _useState7[1];
  var _useState8 = useState(false),
    queryLoading = _useState8[0],
    setQueryLoading = _useState8[1];
  var _useState9 = useState([]),
    currentPageData = _useState9[0],
    setCurrentPageData = _useState9[1];
  var _useState10 = useState([]),
    treeDataSource = _useState10[0],
    setTreeDataSource = _useState10[1];
  useEffect(function () {
    getRelationOption();
    // changeTreeDataSource(formKey);
  }, []);
  useEffect(function () {
    changeTreeDataSource(formKey);
  }, [formKey]);
  useEffect(function () {
    var res = jsonDomSelectService.showEditIcon(formKey, data);
    setShowJsonDom(res);
  }, [formKey, data]);
  useEffect(function () {
    getRelationOption();
  }, [props.relationOption]);
  var getInputShowState = function getInputShowState() {
    var result = formKey !== DataSourceType.dictionaryType;

    // 选中数据源和自定义变量时，需要特殊处理一下
    if (formKey === DataSourceType.dataSourceType || formKey === DataSourceType.customStateType) {
      result = showJsonDom;
    }
    return result;
  };
  function queryDataSource() {
    setQueryLoading(true);
    jsonDomSelectService.getJsonRenderData(formKey, data).then(function (res) {
      setJsonSelectValue(res.jsonSelectValue);
      setRenderJson(res.renderJson);
      setQueryLoading(false);
      setDialogVisible(true);
    });
  }
  function getRelationOption() {
    if (formKey === DataSourceType.tupleType) {
      var list = getTupleTypeRelationList();
      setRelationOption([].concat(relationOption, list));
    } else {
      setRelationOption(props.relationOption);
    }
  }
  function onComChange(list) {
    onChange(list);
  }
  function changeTreeDataSource(key) {
    var _obj;
    if (!key) {
      return;
    }
    var obj = (_obj = {}, _obj[DataSourceType.currentPageType] = getPageTreeDataRelation, _obj[DataSourceType.dataSourceType] = getDataSourceDataRelation, _obj[DataSourceType.customStateType] = getCustomStateRelation, _obj[DataSourceType.modalDialogType] = getModalDialogRelation, _obj[DataSourceType.currentWalletConnectType] = getWalletConnectRelation, _obj[DataSourceType.dictionaryType] = getDictionaryRelation, _obj[DataSourceType.engineRuleType] = getEngineRuleRelation, _obj[DataSourceType.loopDataSelectedType] = getLoopDataSelectedRelation, _obj[DataSourceType.locationType] = getUrlRelation, _obj[DataSourceType.storageDataType] = getStorageDataRelation, _obj);
    var fn = obj[key];
    if (fn) {
      var _data = fn();
      if (key === DataSourceType.currentPageType) {
        setCurrentPageData(_data);
      } else {
        setTreeDataSource(_data);
      }
    }
  }

  /**
   * formKey改变
   * @param v
   */
  function onFormKeyChange(v) {
    setFormKey(v);
    var initData = getInitDataByFormKey(v);
    setData(initData);
    onComChange([{
      key: "formKey",
      value: v
    }, {
      key: "data",
      value: ""
    }, {
      key: "treeData",
      value: []
    }]);
  }
  function childrenChange(v, treeData) {
    setData(v);
    onComChange([{
      key: "data",
      value: v
    }, {
      key: "treeData",
      value: isArray(treeData) ? treeData : [filter_source(treeData)]
    }]);
  }
  function onChangeDataSource(v, index, treeData) {
    var oldData = isArray(data) ? cloneDeep(data) : ["", ""];
    oldData[index] = v;
    var comList = [{
      key: "data",
      value: oldData
    }];
    if (treeData) {
      comList.push({
        key: "treeData",
        value: isArray(treeData) ? treeData : [filter_source(treeData)]
      });
    }
    setData(oldData);
    onComChange(comList);
  }
  function getInitDataByFormKey(v) {
    var result = "";
    if (v === DataSourceType.dataSourceType) {
      result = ["", ""];
    } else if (v === DataSourceType.pactFunctionType) {
      result = {
        pactName: "",
        pactAddress: "",
        pactMethod: "",
        pactParams: []
      };
    }
    return result;
  }
  function tupleRenderOnChange(list) {
    var data = [];
    if (list && list.length) {
      list.forEach(function (item) {
        if (item.key === "data") {
          data = item.value;
        }
      });
    }
    setData(data);
    onComChange(list);
  }
  var ComInputMemo = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "dataSourceRowItem flexComWidth"
    }, /*#__PURE__*/React.createElement(_Input, {
      hasClear: !value.disabled,
      disabled: value.disabled,
      value: data && data[1] || "",
      style: {
        width: "100%"
      },
      placeholder: t("setter.inputPlaceHolder"),
      onChange: function onChange(v) {
        onChangeDataSource(v, 1);
      }
    }), showJsonDom && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
      onClick: queryDataSource
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: queryLoading ? 'loading' : "edit"
    })), /*#__PURE__*/React.createElement(CJsonDomSetter, {
      showType: "none",
      dialogVisible: dialogVisible,
      value: jsonSelectValue,
      dataSource: renderJson,
      onClose: function onClose() {
        setDialogVisible(false);
      },
      onChange: function onChange(v) {
        setJsonSelectValue(v);
        onChangeDataSource(v, 1);
      }
    })));
  }, [showJsonDom, queryLoading, dialogVisible, jsonSelectValue, renderJson, data, value.disabled]);
  var ComCascaderSelectMemo = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "flexComWidth"
    }, /*#__PURE__*/React.createElement(_CascaderSelect, {
      className: "itemOne_select",
      placeholder: t("setter.selectPlaceHolder"),
      popupClassName: "itemOne-Select-popup",
      listClassName: "itemOne-Select-list",
      style: {
        width: '100%',
        minWidth: 0
      },
      dataSource: treeDataSource,
      disabled: value.disabled,
      value: data && data[0] || "",
      onChange: function onChange(v, treeData) {
        onChangeDataSource(v, 0, treeData);
      }
    }));
  }, [treeDataSource, data, value.disabled]);
  return /*#__PURE__*/React.createElement("div", {
    className: "renderByFormKeyBox"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Select, {
    className: "itemOne_select",
    autoWidth: false,
    popupClassName: "itemOne-Select-formKey-popup",
    style: {
      width: '100%',
      minWidth: 0
    },
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    disabled: formKey === DataSourceType.tupleType || value.disabled,
    dataSource: relationOption,
    value: formKey || DataSourceType.currentPageType,
    onChange: function onChange(v) {
      onFormKeyChange(v);
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "renderByFormKeyBox_Other"
  }, formKey === DataSourceType.currentPageType && /*#__PURE__*/React.createElement(_CascaderSelect, {
    className: "itemOne_select",
    popupClassName: "itemOne-Select-popup",
    listClassName: "itemOne-Select-list",
    style: {
      width: 100 + "%",
      minWidth: 0
    },
    dataSource: currentPageData,
    disabled: value.disabled,
    value: data,
    onChange: function onChange(v, treeData) {
      childrenChange(v, treeData);
    },
    placeholder: t("setter.selectPlaceHolder")
  }), formKey === DataSourceType.defaultType && /*#__PURE__*/React.createElement(React.Fragment, null, value.inputType === DefaultInputType.select && /*#__PURE__*/React.createElement(_Select, {
    className: "itemOne_select",
    style: {
      width: 100 + "%",
      minWidth: 0
    },
    placeholder: t('SettingPanel.placeholderSelect'),
    notFoundContent: t('SettingPanel.notFoundContent'),
    disabled: value.disabled,
    dataSource: value.options,
    value: data,
    onChange: function onChange(v) {
      childrenChange(v, []);
    }
  }), value.inputType === DefaultInputType["boolean"] && /*#__PURE__*/React.createElement(_Switch, {
    disabled: value.disabled,
    defaultChecked: data,
    onChange: function onChange(v) {
      childrenChange(v, []);
    }
  }), value.inputType !== DefaultInputType["boolean"] && value.inputType !== DefaultInputType.select && /*#__PURE__*/React.createElement(_Input, {
    hasClear: !value.disabled,
    disabled: value.disabled,
    value: data,
    style: {
      width: 100 + "%"
    },
    placeholder: t("setter.inputPlaceHolder"),
    onChange: function onChange(v) {
      childrenChange(v, []);
    }
  })), (formKey === DataSourceType.requestType || formKey === DataSourceType.loopDataType || formKey === DataSourceType.renderPropsDataType) && /*#__PURE__*/React.createElement(_Input, {
    hasClear: !value.disabled,
    disabled: value.disabled,
    value: data,
    style: {
      width: 100 + "%"
    },
    placeholder: t("setter.inputPlaceHolder"),
    onChange: function onChange(v) {
      childrenChange(v, []);
    }
  }), (formKey === DataSourceType.dataSourceType || formKey === DataSourceType.customStateType || formKey === DataSourceType.modalDialogType || formKey === DataSourceType.dictionaryType || formKey === DataSourceType.loopDataSelectedType || formKey === DataSourceType.storageDataType) && /*#__PURE__*/React.createElement("div", {
    className: "dataSourceRowItem"
  }, ComCascaderSelectMemo, getInputShowState() && ComInputMemo), formKey === DataSourceType.engineRuleType && /*#__PURE__*/React.createElement("div", {
    className: "dataSourceRowItem"
  }, ComCascaderSelectMemo, data[0] && data[0].length && data[0].endsWith('.data') && ComInputMemo), (formKey === DataSourceType.locationType || formKey === DataSourceType.currentWalletConnectType) && /*#__PURE__*/React.createElement("div", {
    className: "dataSourceRowItem"
  }, ComCascaderSelectMemo, (data[0] === WalletConnectType.Custom || data[0] === LocationUrlType.custom) && ComInputMemo), formKey === DataSourceType.tupleType && value.components && /*#__PURE__*/React.createElement(TupleRender, {
    addable: value.addable || 0,
    data: data || [],
    components: value.components,
    onChange: tupleRenderOnChange
  })));
};
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(RenderByFormKeyPage, this.props);
  };
  return _default;
}(Component);
export { _default as default };