import React from 'react';
import { cx } from '@emotion/css';
import { InlineField, SecretTextArea } from '@grafana/ui';
import { TLSSettingsSection } from './TLSSettingsSection.js';
import { useCommonStyles } from '../styles.js';

const SelfSignedCertificate = ({
  enabled,
  certificateConfigured,
  onToggle,
  onCertificateChange,
  onCertificateReset,
  tooltips,
  readOnly
}) => {
  var _a;
  const commonStyles = useCommonStyles();
  return /* @__PURE__ */ React.createElement(
    TLSSettingsSection,
    {
      enabled,
      label: "Add self-signed certificate",
      tooltipText: "Add your own Certificate Authority (CA) certificate on top of one generated by the certificate authorities for additional security measures",
      onToggle: (newEnabled) => onToggle(newEnabled),
      readOnly
    },
    /* @__PURE__ */ React.createElement(
      InlineField,
      {
        label: "CA Certificate",
        labelWidth: 24,
        tooltip: (_a = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _a : "Your self-signed certificate",
        required: true,
        htmlFor: "self-signed-certificate-input",
        interactive: true,
        grow: true,
        className: cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
        disabled: readOnly
      },
      /* @__PURE__ */ React.createElement(
        SecretTextArea,
        {
          id: "self-signed-certificate-input",
          isConfigured: certificateConfigured,
          onChange: (e) => onCertificateChange(e.currentTarget.value),
          onReset: readOnly ? () => {
          } : onCertificateReset,
          placeholder: "Begins with --- BEGIN CERTIFICATE ---",
          rows: 6,
          required: true
        }
      )
    )
  );
};

export { SelfSignedCertificate };
//# sourceMappingURL=SelfSignedCertificate.js.map
