import "choerodon-ui/pro/lib/select-box/style";
import _SelectBox from "choerodon-ui/pro/lib/select-box";
import "choerodon-ui/pro/lib/text-field/style";
import _TextField from "choerodon-ui/pro/lib/text-field";
import "choerodon-ui/pro/lib/form/style";
import _Form from "@hzero-front-ui/c7n-ui/lib/FormPro";
import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/icon/style";
import _Icon from "choerodon-ui/pro/lib/icon";
import "choerodon-ui/pro/lib/tooltip/style";
import _Tooltip from "choerodon-ui/pro/lib/tooltip";
import "choerodon-ui/pro/lib/select/style";
import _Select from "choerodon-ui/pro/lib/select";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

/* eslint-disable react/jsx-no-bind */
import React, { useEffect, Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import { map } from 'lodash';
import useNetWorkStore from "../stores";
import "../index.less";
var Option = _Select.Option;

function FormContent() {
  var _this = this;

  var _useNetWorkStore = useNetWorkStore(),
      refresh = _useNetWorkStore.refresh,
      formDs = _useNetWorkStore.formDs,
      portDs = _useNetWorkStore.portDs,
      endPointsDs = _useNetWorkStore.endPointsDs,
      targetLabelsDs = _useNetWorkStore.targetLabelsDs,
      modal = _useNetWorkStore.modal,
      formatMessage = _useNetWorkStore.intl.formatMessage,
      networkId = _useNetWorkStore.networkId,
      appInstanceOptionsDs = _useNetWorkStore.appInstanceOptionsDs;

  var current = formDs.current; // eslint-disable-next-line consistent-return

  modal.handleOk( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return formDs.submit();

          case 2:
            _context.t0 = _context.sent;

            if (!(_context.t0 !== false)) {
              _context.next = 7;
              break;
            }

            refresh();
            _context.next = 8;
            break;

          case 7:
            return _context.abrupt("return", false);

          case 8:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));

  function createPortGroup() {
    portDs.create();
  }

  function removePortGroup(record) {
    portDs.remove(record);
    portDs.validate();
  }

  function createEndPointGroup() {
    endPointsDs.create();
  }

  function removeEndPointGroup(record) {
    endPointsDs.remove(record);
    endPointsDs.validate();
  }

  function createTargetLabelGroup() {
    targetLabelsDs.create();
  }

  function removeTargetLabelGroup(record) {
    targetLabelsDs.remove(record);
    targetLabelsDs.validate();
  }

  function targetPortOptionRenderer(_ref2) {
    var record = _ref2.record,
        text = _ref2.text,
        value = _ref2.value;
    return /*#__PURE__*/React.createElement(_Tooltip, {
      title: value
    }, value);
  }

  function targetPortOptionsFilter(record) {
    return !!record.get('portName');
  }

  function labelOptionRenderer(_ref3) {
    var record = _ref3.record,
        text = _ref3.text,
        value = _ref3.value;
    return "".concat(record.get('meaning'));
  }

  function appInstanceOptionRenderer(_ref4) {
    var record = _ref4.record,
        text = _ref4.text,
        value = _ref4.value;
    var status = record.get('status');

    if (status) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: status
        }),
        placement: "right"
      }, /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-network-instance-text"
      }, text)), status !== 'running' && /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: 'deleted'
        }),
        placement: "top"
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "error",
        className: "c7ncd-instance-status-icon"
      })));
    }

    return text;
  }

  function appInstanceRenderer(_ref5) {
    var value = _ref5.value,
        text = _ref5.text;
    var instance = appInstanceOptionsDs.find(function (r) {
      return r.get('code') === value;
    });

    if (instance && instance.get('status')) {
      var status = instance.get('status');
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: status
        }),
        placement: "right"
      }, /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-network-instance-text"
      }, text)), status !== 'running' && /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: 'deleted'
        }),
        placement: "top"
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "error",
        className: "c7ncd-instance-status-icon"
      })));
    }

    return text;
  }

  function clearInputOption(record) {
    var meaning = record.get('meaning');
    return meaning && meaning.indexOf(':') >= 0;
  }

  function appServiceRenderer(_ref6) {
    var record = _ref6.record,
        text = _ref6.text,
        value = _ref6.value;
    var serviceType = record.get('serviceType') || 'normal_service';
    var iconType = 'widgets';
    var message = 'project';

    if (serviceType === 'share_service') {
      iconType = 'share';
      message = 'share';
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-create-network-appService"
    }, /*#__PURE__*/React.createElement(_Tooltip, {
      title: formatMessage({
        id: message
      })
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: iconType
    })), /*#__PURE__*/React.createElement("span", {
      className: "c7ncd-create-network-appService-text"
    }, text));
  }

  var targetForm = null;

  if (current) {
    if (current.get('target') === 'instance') {
      targetForm = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Select, {
        name: "appServiceId",
        colSpan: 3,
        className: "app-service-select",
        searchable: true,
        optionRenderer: appServiceRenderer
      }), /*#__PURE__*/React.createElement(_Select, {
        name: "appInstance",
        colSpan: 3,
        className: "app-instance-select",
        optionRenderer: appInstanceOptionRenderer,
        renderer: appInstanceRenderer
      }));
    } else if (current.get('target') === 'param') {
      targetForm = /*#__PURE__*/React.createElement("div", {
        className: "label-form"
      }, map(targetLabelsDs.created, function (record, index) {
        return /*#__PURE__*/React.createElement(_Form, {
          record: record,
          key: "target-label-record-".concat(index),
          columns: 4
        }, /*#__PURE__*/React.createElement(_Select, {
          name: "keyword",
          combo: true,
          optionRenderer: labelOptionRenderer,
          optionsFilter: clearInputOption
        }), /*#__PURE__*/React.createElement(_Icon, {
          className: "network-group-icon",
          type: "drag_handle"
        }), /*#__PURE__*/React.createElement(_Select, {
          name: "value",
          combo: true,
          optionRenderer: labelOptionRenderer,
          optionsFilter: clearInputOption
        }), targetLabelsDs.created.length > 1 ? /*#__PURE__*/React.createElement(_Button, {
          colSpan: 3,
          funcType: "flat",
          icon: "delete",
          onClick: removeTargetLabelGroup.bind(_this, record)
        }) : /*#__PURE__*/React.createElement("span", {
          colSpan: 1
        }));
      }), /*#__PURE__*/React.createElement(_Button, {
        color: "primary",
        funcType: "flat",
        onClick: createTargetLabelGroup,
        icon: "add"
      }, formatMessage({
        id: 'network.config.addtarget'
      })));
    } else {
      targetForm = /*#__PURE__*/React.createElement("div", {
        className: "endpoints-form",
        colSpan: 3
      }, /*#__PURE__*/React.createElement(_TextField, {
        name: "targetIps",
        colSpan: 3
      }), map(endPointsDs.created, function (record, index) {
        return /*#__PURE__*/React.createElement("div", {
          key: "endPort-record-".concat(index),
          columns: 3,
          className: "endpoints-group"
        }, /*#__PURE__*/React.createElement(_TextField, {
          record: record,
          name: "targetPort",
          maxLength: 5
        }), endPointsDs.created.length > 1 ? /*#__PURE__*/React.createElement(_Button, {
          colSpan: 3,
          funcType: "flat",
          icon: "delete",
          onClick: removeEndPointGroup.bind(_this, record)
        }) : /*#__PURE__*/React.createElement("span", {
          colSpan: 3
        }));
      }), /*#__PURE__*/React.createElement(_Button, {
        color: "primary",
        funcType: "flat",
        onClick: createEndPointGroup,
        icon: "add",
        className: "endpoints-form-add"
      }, formatMessage({
        id: 'network.config.addport'
      })));
    }
  }

  var networkName = /*#__PURE__*/React.createElement(_Form, {
    dataSet: formDs,
    columns: 3
  }, /*#__PURE__*/React.createElement(_TextField, {
    name: "name",
    colSpan: 3,
    maxLength: 30,
    disabled: !!networkId
  }));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "c7ncd-create-network"
  }, networkId && networkName, /*#__PURE__*/React.createElement("p", {
    className: "network-panel-title"
  }, formatMessage({
    id: 'network.target'
  })), /*#__PURE__*/React.createElement(_Form, {
    dataSet: formDs,
    columns: 3
  }, /*#__PURE__*/React.createElement("div", {
    className: "network-panel-target-select",
    colSpan: 3
  }, /*#__PURE__*/React.createElement(_SelectBox, {
    name: "target"
  }, /*#__PURE__*/React.createElement(Option, {
    value: "instance"
  }, /*#__PURE__*/React.createElement("span", {
    className: "target-instance"
  }, formatMessage({
    id: 'network.target.instance'
  }))), /*#__PURE__*/React.createElement(Option, {
    value: "param"
  }, /*#__PURE__*/React.createElement("span", {
    className: "target-instance"
  }, formatMessage({
    id: 'network.target.param'
  }))), /*#__PURE__*/React.createElement(Option, {
    value: "endPoints"
  }, "Endpoints"))), /*#__PURE__*/React.createElement("div", {
    colSpan: 3,
    className: "target-form"
  }, targetForm)), /*#__PURE__*/React.createElement("div", {
    className: "hr"
  }), /*#__PURE__*/React.createElement("p", {
    className: "network-panel-title"
  }, formatMessage({
    id: 'network.config'
  })), /*#__PURE__*/React.createElement(_Form, {
    dataSet: formDs,
    columns: 3
  }, /*#__PURE__*/React.createElement("div", {
    className: "type-form",
    newLine: true,
    colSpan: 3
  }, /*#__PURE__*/React.createElement(_SelectBox, {
    name: "type",
    record: current
  }, /*#__PURE__*/React.createElement(Option, {
    value: "ClusterIP"
  }, /*#__PURE__*/React.createElement("span", {
    className: "type-span"
  }, "ClusterIP")), /*#__PURE__*/React.createElement(Option, {
    value: "NodePort"
  }, /*#__PURE__*/React.createElement("span", {
    className: "type-span"
  }, "NodePort")), /*#__PURE__*/React.createElement(Option, {
    value: "LoadBalancer"
  }, "LoadBalancer"))), current.get('type') === 'ClusterIP' && /*#__PURE__*/React.createElement(_TextField, {
    name: "externalIps",
    record: current,
    colSpan: 3
  })), /*#__PURE__*/React.createElement("div", {
    className: "group-port"
  }, map(portDs.created, function (record, index) {
    return /*#__PURE__*/React.createElement(_Form, {
      record: record,
      key: "port-record-".concat(index),
      columns: 5
    }, current.get('type') !== 'ClusterIP' && /*#__PURE__*/React.createElement(_TextField, {
      name: "nodePort",
      maxLength: 5
    }), /*#__PURE__*/React.createElement(_TextField, {
      name: "port",
      maxLength: 5
    }), /*#__PURE__*/React.createElement(_Select, {
      name: "targetPort",
      combo: true,
      optionRenderer: targetPortOptionRenderer,
      clearButton: false,
      optionsFilter: targetPortOptionsFilter
    }), current.get('type') === 'NodePort' && /*#__PURE__*/React.createElement(_Select, {
      name: "protocol",
      clearButton: false
    }, map(['TCP', 'UDP'], function (item) {
      return /*#__PURE__*/React.createElement(Option, {
        value: item,
        key: item
      }, item);
    })), portDs.created.length > 1 ? /*#__PURE__*/React.createElement(_Button, {
      colSpan: 3,
      funcType: "flat",
      icon: "delete",
      className: "c7ncd-form-record-delete-btn",
      onClick: removePortGroup.bind(_this, record)
    }) : /*#__PURE__*/React.createElement("span", {
      colSpan: 3
    }));
  }), /*#__PURE__*/React.createElement(_Button, {
    color: "primary",
    funcType: "flat",
    onClick: createPortGroup,
    icon: "add"
  }, formatMessage({
    id: 'network.config.addport'
  }))), !networkId && networkName));
}

export default observer(FormContent);