import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _NumberPicker from "@alifd/next/es/number-picker";
import _Select from "@alifd/next/es/select";
import React, { useEffect, useState } from "react";
import BoxSlotComponent from "../../_components/boxSlotComponent";
import "../index.less";
import { BehaviorService } from "../../../_utils/behaviorService";
import { uuid } from "../../../_utils/utils";
import { t } from "../../../../src/locale";
export var RefreshBoxComponent = function RefreshBoxComponent(props) {
  var onChange = props.onChange,
    value = props.value;
  var behaviorService = new BehaviorService();
  var _useState = useState(value || []),
    refreshList = _useState[0],
    setRefreshList = _useState[1];
  var _useState2 = useState([]),
    refreshOptions = _useState2[0],
    setRefreshOptions = _useState2[1];
  useEffect(function () {
    var data = behaviorService.getRefreshList();
    setRefreshOptions(data);
  }, []);
  function changeRefreshList(item, index) {
    refreshList[index] = item;
    setRefreshList([].concat(refreshList));
  }
  function removeRefreshList(index) {
    refreshList.splice(index, 1);
    setRefreshList([].concat(refreshList));
  }
  function addRefreshList() {
    var newObj = {
      id: uuid(),
      refreshId: "",
      delayTime: 0
    };
    refreshList.push(newObj);
    setRefreshList([].concat(refreshList));
  }
  useEffect(function () {
    onChange(refreshList);
  }, [refreshList]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "refreshListBox"
  }, refreshList.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id,
      className: "refreshItem"
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        flex: 1
      }
    }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t("setter.refreshUrl")
    }, /*#__PURE__*/React.createElement(_Select, {
      className: "itemOne_select",
      style: {
        width: 100 + "%",
        minWidth: 0
      },
      placeholder: t("setter.selectPlaceHolder"),
      notFoundContent: t('setter.notFoundContent'),
      dataSource: refreshOptions,
      value: item.refreshId,
      onChange: function onChange(v) {
        item.refreshId = v;
        changeRefreshList(item, index);
      }
    })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t("setter.delayRefresh")
    }, /*#__PURE__*/React.createElement("div", {
      className: "refreshDelayBox"
    }, /*#__PURE__*/React.createElement(_NumberPicker, {
      style: {
        width: 100 + "%"
      },
      min: 0,
      step: 1,
      size: "small",
      hasTrigger: false,
      innerAfter: /*#__PURE__*/React.createElement("span", {
        style: {
          marginRight: "10px",
          fontSize: "18px"
        }
      }, "ms"),
      placeholder: t("setter.selectPlaceHolder"),
      value: item.delayTime,
      onChange: function onChange(v) {
        item.delayTime = v;
        changeRefreshList(item, index);
      }
    })))), /*#__PURE__*/React.createElement("div", {
      className: "refreshDBtn"
    }, /*#__PURE__*/React.createElement(_Icon, {
      style: {
        cursor: "pointer"
      },
      type: "ashbin",
      onClick: function onClick() {
        removeRefreshList(index);
      }
    })));
  })), /*#__PURE__*/React.createElement("div", {
    className: "sub_btn"
  }, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    onClick: function onClick() {
      addRefreshList();
    }
  }, /*#__PURE__*/React.createElement("span", null, t("setter.addData")))));
};