import React from 'react';
import { css, cx } from '@emotion/css';
import { InlineField, Input } from '@grafana/ui';
import { ConfigSection } from '../ConfigSection/ConfigSection.js';
import '@grafana/data';

const ConnectionSettings = ({
  config,
  onChange,
  description,
  urlPlaceholder,
  urlTooltip,
  urlLabel,
  className
}) => {
  const isValidUrl = config.url !== undefined && /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(config.url);
  const styles = {
    container: css({
      maxWidth: 578
    })
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ConfigSection, { title: "Connection", description, className: cx(styles.container, className) }, /* @__PURE__ */ React.createElement(
    InlineField,
    {
      htmlFor: "connection-url",
      label: urlLabel || "URL",
      labelWidth: 24,
      tooltip: urlTooltip || /* @__PURE__ */ React.createElement(React.Fragment, null, "Specify a complete HTTP URL", /* @__PURE__ */ React.createElement("br", null), "(for example https://example.com:8080)"),
      grow: true,
      disabled: config.readOnly,
      required: true,
      invalid: !isValidUrl && !config.readOnly,
      error: isValidUrl ? "" : "Please enter a valid URL",
      interactive: true
    },
    /* @__PURE__ */ React.createElement(
      Input,
      {
        id: "connection-url",
        "aria-label": "Data source connection URL",
        onChange: (event) => onChange({
          ...config,
          url: event.currentTarget.value
        }),
        value: config.url || "",
        placeholder: urlPlaceholder || "URL"
      }
    )
  )));
};

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