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

const isAdhocFilterEmpty = (f) => !f.origin && !f.key && !f.operator && !f.value;
function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
  var _a, _b, _c, _d;
  const styles = useStyles2(getStyles$e);
  const { viewMode, pillWrapperRef, populateInputOnEdit, handleChangeViewMode, handlePillClick, handlePillKeyDown } = useEditablePill({ filter, controller, readOnly, focusOnWipInputRef, isFilterEmpty: isAdhocFilterEmpty });
  const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
  const valueLabel = ((_b = filter.valueLabels) == null ? void 0 : _b.join(", ")) || ((_c = filter.values) == null ? void 0 : _c.join(", ")) || filter.value;
  const getOriginFilterTooltips = (origin) => {
    if (origin === "dashboard") {
      return {
        info: "Applied by default in this dashboard. If edited, it carries over to other dashboards.",
        restore: "Restore the value set by this dashboard."
      };
    } else if (origin === "scope") {
      return {
        info: "Applied automatically from your selected scope.",
        restore: "Restore the value set by your selected scope."
      };
    } else {
      return {
        info: `This is a ${origin} injected filter.`,
        restore: `Restore filter to its original value.`
      };
    }
  };
  const cleanFilter = !filter.restorable && !filter.readOnly && !filter.nonApplicable;
  if (viewMode) {
    const pillTextContent = `${keyLabel} ${filter.operator} ${valueLabel}`;
    const handleRemove = () => {
      if (filter.origin && filter.origin === "dashboard") {
        controller.updateToMatchAll(filter);
      } else {
        controller.removeFilter(filter);
      }
      setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
    };
    const showRemove = !readOnly && !filter.matchAllFilter && (!filter.origin || filter.origin === "dashboard");
    return /* @__PURE__ */ React.createElement(
      BasePill,
      {
        ref: pillWrapperRef,
        label: pillTextContent,
        readOnly,
        disabled: isMatchAllFilter(filter) || filter.nonApplicable,
        isFilterReadOnly: filter.readOnly,
        strikethrough: filter.nonApplicable,
        onClick: handlePillClick,
        onKeyDown: handlePillKeyDown,
        ariaLabel: t(
          "grafana-scenes.components.adhoc-filter-pill.edit-filter-with-key",
          "Edit filter with key {{keyLabel}}",
          { keyLabel }
        ),
        onRemove: handleRemove,
        removeAriaLabel: t(
          "grafana-scenes.components.adhoc-filter-pill.remove-filter-with-key",
          "Remove filter with key {{keyLabel}}",
          { keyLabel }
        ),
        removable: showRemove,
        additionalIcons: /* @__PURE__ */ React.createElement(React.Fragment, null, filter.origin && filter.readOnly && /* @__PURE__ */ React.createElement(
          Tooltip,
          {
            content: t("grafana-scenes.components.adhoc-filter-pill.managed-filter", "{{origin}} managed filter", {
              origin: filter.origin
            }),
            placement: "bottom"
          },
          /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "md", className: styles.readOnlyPillIcon })
        ), filter.origin && cleanFilter && /* @__PURE__ */ React.createElement(Tooltip, { content: getOriginFilterTooltips(filter.origin).info, placement: "bottom" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "md", className: styles.infoPillIcon })), filter.origin && filter.restorable && !filter.readOnly && /* @__PURE__ */ React.createElement(
          IconButton,
          {
            onClick: (e) => {
              e.stopPropagation();
              controller.restoreOriginalFilter(filter);
            },
            name: "history",
            size: "md",
            className: isMatchAllFilter(filter) ? styles.matchAllPillIcon : styles.pillIcon,
            tooltip: getOriginFilterTooltips(filter.origin).restore
          }
        ), filter.nonApplicable && /* @__PURE__ */ React.createElement(
          Tooltip,
          {
            content: (_d = filter.nonApplicableReason) != null ? _d : t("grafana-scenes.components.adhoc-filter-pill.non-applicable", "Filter is not applicable"),
            placement: "bottom"
          },
          /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "md", className: styles.infoPillIcon })
        ))
      }
    );
  }
  return /* @__PURE__ */ React.createElement(
    AdHocCombobox,
    {
      filter,
      controller,
      handleChangeViewMode,
      focusOnWipInputRef,
      populateInputOnEdit
    }
  );
}
const getStyles$e = (theme) => ({
  infoPillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer"
  }),
  readOnlyPillIcon: css({
    marginInline: theme.spacing(0.5)
  }),
  pillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer",
    "&:hover": {
      color: theme.colors.text.primary
    }
  }),
  matchAllPillIcon: css({
    marginInline: theme.spacing(0.5),
    cursor: "pointer",
    color: theme.colors.text.disabled
  })
});

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