import { useStyles2, ClickOutsideWrapper, Stack, Text, IconButton, Popover } from '@grafana/ui';
import React, { useState, useRef } from 'react';
import { cx, css } from '@emotion/css';
import { Trans, t } from '@grafana/i18n';

function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns, showRecommended = false }) {
  const styles = useStyles2(getStyles$c);
  const [isPopoverVisible, setPopoverVisible] = useState(false);
  const ref = useRef(null);
  const openPopover = () => {
    setPopoverVisible(true);
  };
  const onClickAction = (action) => {
    action();
    setPopoverVisible(false);
  };
  const content = /* @__PURE__ */ React.createElement(ClickOutsideWrapper, { onClick: () => setPopoverVisible(false), useCapture: true }, /* @__PURE__ */ React.createElement("div", { className: styles.menuContainer, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React.createElement(Stack, { direction: "column" }, /* @__PURE__ */ React.createElement(Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent" }, "Recent")), recentDrilldowns && recentDrilldowns.length > 0 ? recentDrilldowns.map((drilldown) => /* @__PURE__ */ React.createElement(
    "div",
    {
      key: drilldown.label,
      className: cx(styles.combinedFilterPill),
      onClick: () => onClickAction(drilldown.onClick)
    },
    drilldown.label
  )) : /* @__PURE__ */ React.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent-empty" }, "No recent values")), showRecommended && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended" }, "Recommended")), recommendedDrilldowns && recommendedDrilldowns.length > 0 ? recommendedDrilldowns.map((drilldown) => /* @__PURE__ */ React.createElement(
    "div",
    {
      key: drilldown.label,
      className: cx(styles.combinedFilterPill),
      onClick: () => onClickAction(drilldown.onClick)
    },
    drilldown.label
  )) : /* @__PURE__ */ React.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended-empty" }, "No recommended values"))))));
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    IconButton,
    {
      name: "bars-clock",
      tooltip: t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
      ref,
      className: cx(isPopoverVisible && styles.iconActive),
      onClick: (ev) => {
        openPopover();
        ev.stopPropagation();
      }
    }
  ), isPopoverVisible && ref.current && /* @__PURE__ */ React.createElement(
    Popover,
    {
      content,
      onKeyDown: (event) => {
        if (event.key === " ") {
          event.stopPropagation();
        }
      },
      placement: "bottom-start",
      referenceElement: ref.current,
      show: true
    }
  ));
}
const getStyles$c = (theme) => ({
  menuContainer: css({
    display: "flex",
    flexDirection: "column",
    background: theme.colors.background.elevated,
    border: `1px solid ${theme.colors.border.weak}`,
    borderRadius: theme.shape.radius.default,
    boxShadow: theme.shadows.z3,
    padding: theme.spacing(2)
  }),
  combinedFilterPill: css({
    alignItems: "center",
    background: theme.colors.action.selected,
    borderRadius: theme.shape.radius.default,
    border: `1px solid ${theme.colors.border.weak}`,
    padding: theme.spacing(0.2, 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
    }
  }),
  iconActive: css({
    "&:before": {
      backgroundColor: theme.colors.action.hover,
      opacity: 1
    }
  }),
  emptyMessage: css({
    padding: theme.spacing(0.5, 0),
    color: theme.colors.text.secondary,
    ...theme.typography.bodySmall
  })
});

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