import React from 'react';
import { css } from '@emotion/css';
import { useStyles2, Tooltip, Icon } from '@grafana/ui';
import { AdHocCombobox } from './AdHocFiltersCombobox.js';
import { BasePill } from './BasePill.js';
import { useEditablePill } from './useEditablePill.js';
import { t } from '@grafana/i18n';

const isGroupByFilterEmpty = (f) => !f.key;
function GroupByPill({ filter, controller, readOnly, focusOnWipInputRef }) {
  var _a;
  const styles = useStyles2(getStyles$d);
  const { viewMode, pillWrapperRef, populateInputOnEdit, handleChangeViewMode, handlePillClick, handlePillKeyDown } = useEditablePill({ filter, controller, readOnly, focusOnWipInputRef, isFilterEmpty: isGroupByFilterEmpty });
  const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
  const handleRemove = () => {
    if (filter.origin && filter.origin === "dashboard") {
      controller.updateToMatchAll(filter);
    } else {
      controller.removeFilter(filter);
    }
    setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
  };
  const isCleanDefault = filter.origin && !filter.restorable && !filter.readOnly;
  if (viewMode) {
    return /* @__PURE__ */ React.createElement(
      BasePill,
      {
        ref: pillWrapperRef,
        label: keyLabel,
        readOnly,
        onClick: handlePillClick,
        onKeyDown: handlePillKeyDown,
        ariaLabel: t("grafana-scenes.components.group-by-pill.group-by-key", "Group by {{keyLabel}}", { keyLabel }),
        onRemove: handleRemove,
        removable: !readOnly,
        removeAriaLabel: t(
          "grafana-scenes.components.group-by-pill.remove-group-by-key",
          "Remove group by {{keyLabel}}",
          { keyLabel }
        ),
        additionalIcons: /* @__PURE__ */ React.createElement(React.Fragment, null, isCleanDefault && /* @__PURE__ */ React.createElement(
          Tooltip,
          {
            content: t(
              "grafana-scenes.components.group-by-pill.applied-by-default",
              "Applied by default in this dashboard. If edited, it carries over to other dashboards."
            ),
            placement: "bottom"
          },
          /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "md", className: styles.infoPillIcon })
        ))
      }
    );
  }
  return /* @__PURE__ */ React.createElement(
    AdHocCombobox,
    {
      isGroupBy: true,
      filter,
      controller,
      handleChangeViewMode,
      focusOnWipInputRef,
      populateInputOnEdit
    }
  );
}
const getStyles$d = (theme) => ({
  infoPillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer"
  })
});

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