import React from 'react';
import { css } from '@emotion/css';
import { useTheme2, Button } from '@grafana/ui';
import { DataLinkBuiltInVars, VariableOrigin } from '@grafana/data';
import { DataLink } from './DataLink.js';

const getStyles = (theme) => ({
  infoText: css`
    padding-bottom: ${theme.v1.spacing.md};
    color: ${theme.v1.colors.textWeak};
  `,
  dataLink: css`
    margin-bottom: ${theme.v1.spacing.sm};
  `
});
const DataLinks = (props) => {
  const { value, onChange } = props;
  const theme = useTheme2();
  const styles = getStyles(theme);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
    return /* @__PURE__ */ React.createElement(
      DataLink,
      {
        className: styles.dataLink,
        key: index,
        value: field,
        onChange: (newField) => {
          const newDataLinks = [...value];
          newDataLinks.splice(index, 1, newField);
          onChange(newDataLinks);
        },
        onDelete: () => {
          const newDataLinks = [...value];
          newDataLinks.splice(index, 1);
          onChange(newDataLinks);
        },
        suggestions: [
          {
            value: DataLinkBuiltInVars.valueRaw,
            label: "Raw value",
            documentation: "Raw value of the field",
            origin: VariableOrigin.Value
          }
        ]
      }
    );
  }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
    Button,
    {
      variant: "secondary",
      className: css`
              margin-right: 10px;
            `,
      icon: "plus",
      onClick: (event) => {
        event.preventDefault();
        const newDataLinks = [...value || [], { field: "", label: "", matcherRegex: "", url: "" }];
        onChange(newDataLinks);
      }
    },
    "Add"
  ))));
};

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