import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/select/style";
import _Select from "choerodon-ui/pro/lib/select";
import "choerodon-ui/pro/lib/form/style";
import _Form from "@hzero-front-ui/c7n-ui/lib/FormPro";
import "choerodon-ui/pro/lib/text-field/style";
import _TextField from "choerodon-ui/pro/lib/text-field";
import "choerodon-ui/pro/lib/select-box/style";
import _SelectBox from "choerodon-ui/pro/lib/select-box";
import React from 'react';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import { useBatchDeployStore } from "./stores";
var Option = _SelectBox.Option;
export default observer(function () {
  var _useBatchDeployStore = useBatchDeployStore(),
      formatMessage = _useBatchDeployStore.intl.formatMessage,
      prefixCls = _useBatchDeployStore.prefixCls,
      batchDeployDs = _useBatchDeployStore.batchDeployDs,
      portsDs = _useBatchDeployStore.portsDs,
      networkDs = _useBatchDeployStore.networkDs;

  var record = networkDs.current;

  function handleRemovePort(portRecord) {
    portsDs.remove(portRecord);
    portsDs.validate();
  }

  function handlePortAdd() {
    portsDs.create();
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-resource-network")
  }, /*#__PURE__*/React.createElement(_Form, {
    dataSet: networkDs
  }, /*#__PURE__*/React.createElement(_TextField, {
    name: "name",
    disabled: batchDeployDs.current && !batchDeployDs.current.get('environmentId')
  }), /*#__PURE__*/React.createElement(_SelectBox, {
    name: "type",
    className: "".concat(prefixCls, "-resource-mgt-12")
  }, /*#__PURE__*/React.createElement(Option, {
    value: "ClusterIP"
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-resource-radio")
  }, "ClusterIP")), /*#__PURE__*/React.createElement(Option, {
    value: "NodePort"
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-resource-radio")
  }, "NodePort")), /*#__PURE__*/React.createElement(Option, {
    value: "LoadBalancer"
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-resource-radio")
  }, "LoadBalancer"))), record.get('type') === 'ClusterIP' && /*#__PURE__*/React.createElement(_TextField, {
    name: "externalIp"
  })), map(portsDs.data, function (portRecord) {
    return /*#__PURE__*/React.createElement(_Form, {
      record: portRecord,
      key: portRecord.id,
      columns: 13
    }, record.get('type') !== 'ClusterIP' && /*#__PURE__*/React.createElement(_TextField, {
      name: "nodePort",
      colSpan: 3
    }), /*#__PURE__*/React.createElement(_TextField, {
      name: "port",
      colSpan: 3
    }), /*#__PURE__*/React.createElement(_TextField, {
      name: "targetPort",
      colSpan: 3
    }), record.get('type') === 'NodePort' && /*#__PURE__*/React.createElement(_Select, {
      name: "protocol",
      colSpan: 3
    }), portsDs.length > 1 ? /*#__PURE__*/React.createElement(_Button, {
      funcType: "flat",
      icon: "delete",
      onClick: function onClick() {
        return handleRemovePort(portRecord);
      },
      className: "".concat(prefixCls, "-resource-delete-btn")
    }) : /*#__PURE__*/React.createElement("span", null));
  }), /*#__PURE__*/React.createElement(_Button, {
    color: "primary",
    funcType: "flat",
    onClick: handlePortAdd,
    icon: "add"
  }, formatMessage({
    id: 'network.config.addport'
  })));
});