import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _Switch from "@alifd/next/es/switch";
import React, { Component, useState, useEffect } from "react";
import AliLowCodeEngineExt from "@alilc/lowcode-engine-ext";
import { LoadingConfigOpenMode } from "../cDataSource-setter/type";
import BoxSlotComponent from "./boxSlotComponent";
import BoxGroup from "./boxGroup";
import { t } from "../../../src/locale";
var ColorSetter = AliLowCodeEngineExt.setters.ColorSetter;
var selectArr = [{
  label: t("setter.loadDefault"),
  value: LoadingConfigOpenMode["default"]
}, {
  label: t("setter.loadCustom"),
  value: LoadingConfigOpenMode.custom
}];
var CLoadingConfigSetter = function CLoadingConfigSetter(props) {
  var value = props.value,
    onChange = props.onChange;
  var _useState = useState(value.openType || false),
    openType = _useState[0],
    setOpenType = _useState[1];
  var _useState2 = useState(value.openMode || LoadingConfigOpenMode["default"]),
    openMode = _useState2[0],
    setOpenMode = _useState2[1];
  var _useState3 = useState(value.defaultConfig || {
      loadText: "loading...",
      loadColor: "#03c1fd",
      loadBgColor: "#fff",
      loadBgOverlay: "rgba(122, 122, 122, 0.8)"
    }),
    defaultConfig = _useState3[0],
    setDefaultConfig = _useState3[1];
  useEffect(function () {
    onChange({
      openType: openType,
      openMode: openMode,
      defaultConfig: defaultConfig
    });
  }, [openType, openMode, defaultConfig]);
  return /*#__PURE__*/React.createElement("div", {
    className: "cLoadingConfigSetter-box"
  }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.openLoad")
  }, /*#__PURE__*/React.createElement(_Switch, {
    checked: openType,
    onChange: function onChange(v) {
      setOpenType(v);
    }
  })), openType && /*#__PURE__*/React.createElement(BoxGroup, {
    title: t("setter.openMode"),
    value: openMode,
    groupList: selectArr,
    onChange: function onChange(e) {
      setOpenMode(e);
    }
  }), openType && openMode === LoadingConfigOpenMode["default"] && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.tipText")
  }, /*#__PURE__*/React.createElement(_Input, {
    style: {
      width: "100%"
    },
    name: "urlData",
    placeholder: t("setter.inputPlaceHolder"),
    value: defaultConfig.loadText,
    onChange: function onChange(e) {
      setDefaultConfig(_extends({}, defaultConfig, {
        loadText: e
      }));
    }
  })), openType && openMode === LoadingConfigOpenMode["default"] && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.tipColor")
  }, /*#__PURE__*/React.createElement(ColorSetter, {
    value: defaultConfig.loadColor,
    onChange: function onChange(v) {
      setDefaultConfig(_extends({}, defaultConfig, {
        loadColor: v
      }));
    }
  })), openType && openMode === LoadingConfigOpenMode["default"] && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.tipBgColor")
  }, /*#__PURE__*/React.createElement(ColorSetter, {
    value: defaultConfig.loadBgColor,
    onChange: function onChange(v) {
      setDefaultConfig(_extends({}, defaultConfig, {
        loadBgColor: v
      }));
    }
  })), openType && openMode === LoadingConfigOpenMode["default"] && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.tipOverlay")
  }, /*#__PURE__*/React.createElement(ColorSetter, {
    value: defaultConfig.loadBgOverlay,
    onChange: function onChange(v) {
      setDefaultConfig(_extends({}, defaultConfig, {
        loadBgOverlay: v
      }));
    }
  })), openType && openMode === LoadingConfigOpenMode.custom && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.selectDialog")
  }, t("setter.undeveloped")));
};
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(CLoadingConfigSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };