/* Copyright © 2020 Splunk Inc.
SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
in part without a valid written license from Splunk Inc. is PROHIBITED. */
import {
  useVizTheme
} from "./chunk-P6Y5CKTH.js";
import {
  styled_components_default,
  styled_components_exports
} from "./chunk-5LUILIR3.js";
import {
  buildSeriesForLegend,
  exists,
  formatValueWithSeriesConfig,
  getMergedSeriesConfigForField
} from "./chunk-6N4JNZ5S.js";
import {
  react_default,
  react_exports
} from "./chunk-V3S5WUKN.js";
import {
  __export,
  __objRest,
  __reExport,
  __spreadProps,
  __spreadValues
} from "./chunk-XC4WXK3L.js";

// esm-externals:@splunk/react-ui/Heading
var Heading_exports = {};
__export(Heading_exports, {
  default: () => Heading_default
});
__reExport(Heading_exports, Heading_star);
import * as defaultImport from "@splunk/react-ui/Heading";
import * as Heading_star from "@splunk/react-ui/Heading";
var Heading_default = "default" in defaultImport ? defaultImport.default : defaultImport;

// esm-externals:@splunk/react-ui/Tooltip
var Tooltip_exports = {};
__export(Tooltip_exports, {
  default: () => Tooltip_default
});
__reExport(Tooltip_exports, Tooltip_star);
import * as defaultImport2 from "@splunk/react-ui/Tooltip";
import * as Tooltip_star from "@splunk/react-ui/Tooltip";
var Tooltip_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;

// src/Legends.tsx
var StyledTooltip = styled_components_default(Tooltip_default)`
    flex-shrink: 0;
`;
var DEFAULT_BOTTOM_LEGEND_HEIGHT = 35;
var DEFAULT_SIDE_LEGEND_WIDTH = 200;
var LegendSeriesItem = ({
  series,
  defocus,
  onSeriesClick,
  onSeriesHover,
  formattedValue,
  fontSize
}) => {
  const { field, label, fill, stroke, show } = series;
  const [isOverflowed, setIsOverflowed] = (0, react_exports.useState)(false);
  const ref = (0, react_exports.useRef)(null);
  const handleClick = (0, react_exports.useCallback)(() => {
    onSeriesClick(field, ref);
  }, [onSeriesClick, field]);
  const handleMouseEnter = (0, react_exports.useCallback)(() => {
    onSeriesHover(field);
  }, [onSeriesHover, field]);
  const handleHover = (0, react_exports.useCallback)(() => {
    onSeriesHover(null);
  }, [onSeriesHover]);
  const handleMouseOver = (0, react_exports.useCallback)(({ currentTarget }) => {
    setIsOverflowed(currentTarget.scrollWidth > currentTarget.offsetWidth);
  }, []);
  return /* @__PURE__ */ react_default.createElement(StyledTooltip, { content: label && isOverflowed ? /* @__PURE__ */ react_default.createElement("span", null, label) : "", inline: false }, /* @__PURE__ */ react_default.createElement(
    "div",
    {
      ref,
      style: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        cursor: "pointer",
        fontSize: `${fontSize || 10}px`,
        opacity: show && !defocus ? 1 : 0.3,
        height: "13px"
      },
      role: "button",
      onClick: handleClick,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleHover
    },
    /* @__PURE__ */ react_default.createElement(
      "div",
      {
        style: {
          display: "flex",
          position: "relative",
          width: 6,
          height: 11,
          borderRadius: "1px",
          backgroundColor: fill ? String(fill) : String(stroke),
          marginRight: 5,
          marginTop: 1
        }
      }
    ),
    /* @__PURE__ */ react_default.createElement(
      "div",
      {
        style: __spreadValues({
          flex: 1,
          whiteSpace: "nowrap",
          textOverflow: "ellipsis",
          overflow: "hidden"
        }, formattedValue && { marginRight: 3 }),
        onMouseOver: handleMouseOver
      },
      label
    ),
    /* @__PURE__ */ react_default.createElement("div", null, formattedValue)
  ));
};
var LegendSeriesList = (props) => {
  const {
    plotUtilities,
    data,
    cursorState,
    seriesConfig = {},
    scaleConfig = {},
    hideSeriesValue,
    seriesDataAccessor = (i) => (cursorState == null ? void 0 : cursorState.cursor) ? data.columns[i + 1][cursorState.cursor.index] : null,
    fontSize,
    reversedOrder,
    onSeriesClick,
    onSeriesHover,
    marks
  } = props;
  const slicedSeries = buildSeriesForLegend(plotUtilities.allSeries, reversedOrder, marks);
  const [hoveredSeriesKey, setHoveredSeriesKey] = (0, react_exports.useState)();
  const handleSeriesHover = (0, react_exports.useCallback)(
    (field) => {
      setHoveredSeriesKey(field);
      onSeriesHover(field);
    },
    [onSeriesHover]
  );
  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, slicedSeries.map((series, i) => {
    const { field } = series;
    let formattedValue = hideSeriesValue ? null : " ";
    const seriesIndex = reversedOrder ? slicedSeries.length - i - 1 : i;
    if (seriesIndex < data.columns.length - 1) {
      const value = seriesDataAccessor(seriesIndex);
      if (value !== null) {
        const config = getMergedSeriesConfigForField(seriesConfig, scaleConfig, field);
        formattedValue = formatValueWithSeriesConfig(value, config, data);
      }
    }
    let defocus = false;
    if (exists(cursorState == null ? void 0 : cursorState.seriesIndex) || hoveredSeriesKey) {
      if (hoveredSeriesKey) {
        defocus = field !== hoveredSeriesKey;
      } else {
        defocus = reversedOrder ? slicedSeries.length - i !== (cursorState == null ? void 0 : cursorState.seriesIndex) : i + 1 !== (cursorState == null ? void 0 : cursorState.seriesIndex);
      }
    }
    return /* @__PURE__ */ react_default.createElement(
      LegendSeriesItem,
      {
        key: field,
        series,
        defocus,
        formattedValue,
        onSeriesClick,
        onSeriesHover: handleSeriesHover,
        fontSize
      }
    );
  }));
};
var SideLegendComponent = (props) => {
  const _a = props, { plotUtilities, title, width } = _a, legendSeriesProps = __objRest(_a, ["plotUtilities", "title", "width"]);
  const theme = useVizTheme();
  if (!plotUtilities) {
    return null;
  }
  return /* @__PURE__ */ react_default.createElement(
    "div",
    {
      style: {
        display: "flex",
        flexDirection: "column",
        width,
        color: theme.color,
        height: "100%",
        overflowX: "hidden",
        overflowY: "auto",
        paddingRight: 5
      }
    },
    title && /* @__PURE__ */ react_default.createElement(Heading_default, { level: 6 }, " ", title, " "),
    /* @__PURE__ */ react_default.createElement(LegendSeriesList, __spreadValues({ plotUtilities }, legendSeriesProps))
  );
};
var BottomLegendComponent = (props) => {
  const _a = props, { plotUtilities, title, wrap } = _a, legendSeriesProps = __objRest(_a, ["plotUtilities", "title", "wrap"]);
  const theme = useVizTheme();
  if (!plotUtilities) {
    return null;
  }
  return /* @__PURE__ */ react_default.createElement("div", null, title && /* @__PURE__ */ react_default.createElement(Heading_default, { style: { marginTop: "0" }, level: 6 }, title), /* @__PURE__ */ react_default.createElement(
    "div",
    {
      style: {
        display: "flex",
        flexWrap: wrap ? "wrap" : "nowrap",
        color: theme.color,
        gap: "0px 10px"
      }
    },
    /* @__PURE__ */ react_default.createElement(LegendSeriesList, __spreadValues({ plotUtilities }, legendSeriesProps))
  ));
};
var SideLegendFactory = (props) => {
  const component = (componentProps) => {
    if (props) {
      const { aggregateData, title, reversedOrder, width, fontSize, hideSeriesValue } = props;
      if (hideSeriesValue === true) {
        return /* @__PURE__ */ react_default.createElement(
          SideLegendComponent,
          __spreadProps(__spreadValues({}, componentProps), {
            width: width || DEFAULT_SIDE_LEGEND_WIDTH,
            hideSeriesValue: true,
            seriesDataAccessor: () => null,
            fontSize,
            title,
            reversedOrder
          })
        );
      }
      const { cursorState } = componentProps;
      if (aggregateData && (cursorState === void 0 || cursorState.cursor === null)) {
        return /* @__PURE__ */ react_default.createElement(
          SideLegendComponent,
          __spreadProps(__spreadValues({}, componentProps), {
            width: width || DEFAULT_SIDE_LEGEND_WIDTH,
            title,
            seriesDataAccessor: (i) => aggregateData[i],
            fontSize,
            reversedOrder
          })
        );
      }
      return /* @__PURE__ */ react_default.createElement(
        SideLegendComponent,
        __spreadProps(__spreadValues({}, componentProps), {
          width: width || DEFAULT_SIDE_LEGEND_WIDTH,
          fontSize,
          title,
          reversedOrder
        })
      );
    }
    return /* @__PURE__ */ react_default.createElement(SideLegendComponent, __spreadProps(__spreadValues({}, componentProps), { width: 200 }));
  };
  return {
    component,
    size: { width: (props == null ? void 0 : props.width) || DEFAULT_SIDE_LEGEND_WIDTH },
    anchor: "right"
  };
};
var BottomLegendFactory = (props) => {
  const component = (componentProps) => {
    if (props) {
      const { aggregateData, title, reversedOrder, wrap, fontSize, hideSeriesValue } = props;
      if (hideSeriesValue === true) {
        return /* @__PURE__ */ react_default.createElement(
          BottomLegendComponent,
          __spreadProps(__spreadValues({}, componentProps), {
            hideSeriesValue: true,
            seriesDataAccessor: () => null,
            wrap,
            fontSize,
            title,
            reversedOrder
          })
        );
      }
      const { cursorState } = componentProps;
      if (aggregateData && (cursorState === void 0 || cursorState.cursor === null)) {
        return /* @__PURE__ */ react_default.createElement(
          BottomLegendComponent,
          __spreadProps(__spreadValues({}, componentProps), {
            seriesDataAccessor: (i) => aggregateData[i],
            wrap,
            fontSize,
            title,
            reversedOrder
          })
        );
      }
      return /* @__PURE__ */ react_default.createElement(
        BottomLegendComponent,
        __spreadProps(__spreadValues({}, componentProps), {
          wrap,
          fontSize,
          title,
          reversedOrder
        })
      );
    }
    return /* @__PURE__ */ react_default.createElement(BottomLegendComponent, __spreadValues({}, componentProps));
  };
  return {
    component,
    size: { height: (props == null ? void 0 : props.height) || DEFAULT_BOTTOM_LEGEND_HEIGHT },
    anchor: "bottom"
  };
};
var BottomLegend = BottomLegendFactory();
var SideLegend = SideLegendFactory();
var LegendMap = {
  bottom: BottomLegend,
  right: SideLegend
};

export {
  SideLegendComponent,
  BottomLegendComponent,
  SideLegendFactory,
  BottomLegendFactory,
  BottomLegend,
  SideLegend,
  LegendMap
};
//# sourceMappingURL=chunk-JVJFBB3Y.js.map
