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/tooltip/style";
import _Tooltip from "choerodon-ui/pro/lib/tooltip";
import "choerodon-ui/pro/lib/icon/style";
import _Icon from "choerodon-ui/pro/lib/icon";
import React from 'react';
import { observer } from 'mobx-react-lite';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Choerodon } from '@choerodon/boot';
import { useRecordDetailStore } from "./stores";
import Loading from "../../../../components/loading";
import "./index.less";
export default observer(function () {
  var _useRecordDetailStore = useRecordDetailStore(),
      formatMessage = _useRecordDetailStore.intl.formatMessage,
      intlPrefix = _useRecordDetailStore.intlPrefix,
      prefixCls = _useRecordDetailStore.prefixCls,
      projectFormDs = _useRecordDetailStore.projectFormDs,
      appFormDs = _useRecordDetailStore.appFormDs;

  function handleCopy() {
    Choerodon.prompt(formatMessage({
      id: 'copy_success'
    }));
  }

  function getFormContent(ds) {
    return ds.map(function (eachRecord) {
      return /*#__PURE__*/React.createElement(_Form, {
        record: eachRecord,
        columns: 13,
        key: eachRecord.id
      }, /*#__PURE__*/React.createElement(_TextField, {
        colSpan: 9,
        name: "key",
        disabled: true,
        addonAfter: /*#__PURE__*/React.createElement(_Tooltip, {
          title: formatMessage({
            id: 'copy'
          }),
          placement: "top"
        }, /*#__PURE__*/React.createElement(CopyToClipboard, {
          text: eachRecord.get('key'),
          onCopy: handleCopy
        }, /*#__PURE__*/React.createElement(_Icon, {
          type: "content_copy",
          style: {
            cursor: 'pointer'
          }
        })))
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-equal")
      }, "="), /*#__PURE__*/React.createElement(_TextField, {
        colSpan: 3,
        value: "******",
        label: formatMessage({
          id: 'value'
        }),
        disabled: true
      }));
    });
  }

  if (!projectFormDs || projectFormDs.status === 'loading') {
    return /*#__PURE__*/React.createElement(Loading, {
      display: true
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-title")
  }, formatMessage({
    id: "".concat(intlPrefix, ".settings.project")
  })), projectFormDs.length ? getFormContent(projectFormDs) : /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-title-empty")
  }, formatMessage({
    id: "".concat(intlPrefix, ".settings.project.empty")
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-title-app")
  }, formatMessage({
    id: "".concat(intlPrefix, ".settings.app")
  })), appFormDs.length ? getFormContent(appFormDs) : /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-title-empty")
  }, formatMessage({
    id: "".concat(intlPrefix, ".settings.app.empty")
  })));
});