import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _extends from "@babel/runtime/helpers/extends";
import _Input from "@alifd/next/es/input";
import _Select from "@alifd/next/es/select";
import React, { Component, useEffect, useState } from "react";
import "./index.less";
import BoxSlotComponent from "../_components/boxSlotComponent";
import { DataSourceType, getRelationList } from "../../_utils/formKeyType";
import { CDataSourceListSetter } from "..";
import { getLoopRelationList } from "./util";
import { t } from "../../../src/locale";
import RenderByFormKey from "../_components/renderByFormKey";
import { handleRenderByFormKeyData } from "../../_utils/utils";
import { getInitStateKey } from "../cBehavior-setter/config/utils";
var CLoopDataSetter = function CLoopDataSetter(props) {
  var value = props.value,
    field = props.field,
    onChange = props.onChange;
  var _useState = useState([]),
    options = _useState[0],
    setOptions = _useState[1];
  var _useState2 = useState([]),
    customOption = _useState2[0],
    setCustomOption = _useState2[1];
  var _useState3 = useState(value === null || value === void 0 ? void 0 : value.type),
    type = _useState3[0],
    setType = _useState3[1];
  var _useState4 = useState((value === null || value === void 0 ? void 0 : value.dataSourceList) || []),
    dataSourceList = _useState4[0],
    setDataSourceList = _useState4[1];
  var _useState5 = useState(value === null || value === void 0 ? void 0 : value.loopValue),
    loopValue = _useState5[0],
    setLoopValue = _useState5[1];
  var _useState6 = useState(value === null || value === void 0 ? void 0 : value.loopKey),
    loopKey = _useState6[0],
    setLoopKey = _useState6[1];
  var _useState7 = useState((value === null || value === void 0 ? void 0 : value.loopAppointData) || getInitStateKey(DataSourceType.defaultType, '')),
    loopAppointData = _useState7[0],
    setLoopAppointData = _useState7[1];
  useEffect(function () {
    var options = getLoopRelationList(field.node);
    var customData = getRelationList();
    setOptions(options);
    setCustomOption(customData);
  }, []);
  useEffect(function () {
    var obj = {
      type: type,
      dataSourceList: dataSourceList,
      loopValue: loopValue,
      loopKey: loopKey,
      loopAppointData: loopAppointData
    };
    onChange(obj);
  }, [type, dataSourceList, loopValue, loopKey, loopAppointData]);
  return /*#__PURE__*/React.createElement("div", {
    className: "cLoopSetterBox"
  }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.dataType")
  }, /*#__PURE__*/React.createElement(_Select, {
    hasClear: true,
    value: type,
    dataSource: options,
    style: {
      width: "100%"
    },
    onChange: function onChange(e) {
      setType(e);
    }
  })), type !== undefined && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.dataKey")
  }, /*#__PURE__*/React.createElement(_Input, {
    hasClear: true,
    value: loopKey,
    style: {
      width: "100%"
    },
    placeholder: t("setter.dataKeyHolder"),
    onChange: function onChange(e) {
      setLoopKey(e);
    }
  }))), type === DataSourceType.dataSourceType && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CDataSourceListSetter, {
    value: dataSourceList,
    maxAddNum: 1,
    onChange: function onChange(e) {
      setDataSourceList(e);
    }
  })), type === DataSourceType.loopDataType && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.loopField")
  }, /*#__PURE__*/React.createElement(_Input, {
    hasClear: true,
    value: loopValue,
    style: {
      width: "100%"
    },
    placeholder: t("setter.loopPlaceHolder"),
    onChange: function onChange(e) {
      setLoopValue(e);
    }
  }))), type === DataSourceType.loopCustomDataType && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: "" + t("setter.loopCustomOrigin")
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RenderByFormKey, {
    relationOption: customOption,
    value: loopAppointData,
    onChange: function onChange(v) {
      handleRenderByFormKeyData(v, function (newItem) {
        var newData = _extends({}, loopAppointData, newItem);
        setLoopAppointData(newData);
      });
    }
  }))));
};
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(CLoopDataSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };