import { cx, css } from '@emotion/css';
import { useStyles2, Tooltip, IconButton } from '@grafana/ui';
import React, { forwardRef } from 'react';
import { t } from '@grafana/i18n';
import { getNonApplicablePillStyles } from '../../utils.js';

const LABEL_MAX_VISIBLE_LENGTH = 20;
const BasePill = forwardRef(function BasePill2({
  label,
  onRemove,
  removable = !!onRemove,
  onClick,
  onKeyDown,
  readOnly,
  disabled,
  isFilterReadOnly,
  strikethrough,
  ariaLabel,
  removeAriaLabel,
  additionalIcons
}, ref) {
  const styles = useStyles2(getStyles$f);
  const pillText = /* @__PURE__ */ React.createElement("span", { className: cx(styles.pillText, strikethrough && styles.strikethrough) }, label);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: cx(
        styles.combinedFilterPill,
        readOnly && styles.readOnlyCombinedFilter,
        disabled && styles.disabledPill,
        isFilterReadOnly && styles.filterReadOnly
      ),
      onClick,
      onKeyDown,
      role: readOnly ? void 0 : "button",
      "aria-label": ariaLabel,
      tabIndex: 0,
      ref
    },
    label.length < LABEL_MAX_VISIBLE_LENGTH ? pillText : /* @__PURE__ */ React.createElement(Tooltip, { content: /* @__PURE__ */ React.createElement("div", { className: styles.tooltipText }, label), placement: "top" }, pillText),
    removable && onRemove && /* @__PURE__ */ React.createElement(
      IconButton,
      {
        onClick: (e) => {
          e.stopPropagation();
          onRemove();
        },
        onKeyDownCapture: (e) => {
          if (e.key === "Enter") {
            e.preventDefault();
            e.stopPropagation();
            onRemove();
          }
        },
        name: "times",
        size: "md",
        className: cx(styles.pillIcon, disabled && styles.disabledPillIcon),
        tooltip: removeAriaLabel != null ? removeAriaLabel : t("grafana-scenes.components.base-pill.remove", "Remove {{label}}", { label })
      }
    ),
    additionalIcons
  );
});
const getBasePillStyles = (theme) => ({
  combinedFilterPill: css({
    display: "flex",
    alignItems: "center",
    background: theme.colors.action.selected,
    borderRadius: theme.shape.radius.default,
    border: `1px solid ${theme.colors.border.weak}`,
    padding: theme.spacing(0.125, 0, 0.125, 1),
    color: theme.colors.text.primary,
    overflow: "hidden",
    whiteSpace: "nowrap",
    minHeight: theme.spacing(2.75),
    ...theme.typography.bodySmall,
    fontWeight: theme.typography.fontWeightBold,
    cursor: "pointer",
    "&:hover": {
      background: theme.colors.action.hover
    }
  }),
  readOnlyCombinedFilter: css({
    paddingRight: theme.spacing(1),
    cursor: "text",
    "&:hover": {
      background: theme.colors.action.selected
    }
  }),
  filterReadOnly: css({
    background: theme.colors.background.canvas,
    cursor: "text",
    "&:hover": {
      background: theme.colors.background.canvas
    }
  }),
  pillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer",
    "&:hover": {
      color: theme.colors.text.primary
    }
  }),
  pillText: css({
    maxWidth: "200px",
    width: "100%",
    textOverflow: "ellipsis",
    overflow: "hidden"
  }),
  tooltipText: css({
    textAlign: "center"
  }),
  disabledPillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer",
    color: theme.colors.text.disabled,
    "&:hover": {
      color: theme.colors.text.disabled
    }
  }),
  ...getNonApplicablePillStyles(theme)
});
const getStyles$f = getBasePillStyles;

export { BasePill, getBasePillStyles };
//# sourceMappingURL=BasePill.js.map
