/* 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 {
  BasicEventAnnotationTooltip
} from "./chunk-G727SYRY.js";
import {
  Alert,
  CriticalSeverity,
  DefaultAnnotationLabels
} from "./chunk-OHHNF4E3.js";
import {
  themes_exports,
  useVizTheme
} from "./chunk-P6Y5CKTH.js";
import {
  styled_components_default,
  styled_components_exports
} from "./chunk-5LUILIR3.js";
import {
  SECOND_TO_MICROSECOND,
  exists,
  formatValueWithSeriesConfig,
  getMergedSeriesConfigForField,
  getXAxisResolution
} from "./chunk-6N4JNZ5S.js";
import {
  formatDurationMicros,
  formatTimestamp,
  lodash_exports
} from "./chunk-FWZM3EJJ.js";
import {
  react_default,
  react_exports
} from "./chunk-V3S5WUKN.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-XC4WXK3L.js";

// src/Tooltips.tsx
var StyledPointValue = styled_components_default.div`
    display: flex;
    flex-direction: row;
`;
var StyledSeriesIcon = styled_components_default.div`
    margin-top: 7px;
    margin-right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 5px;
    background-color: ${(props) => {
  var _a, _b;
  return ((_a = props.series.fill) == null ? void 0 : _a.toString()) || ((_b = props.series.stroke) == null ? void 0 : _b.toString()) || "transparent";
}};
`;
var StyledResolution = styled_components_default.div`
    color: #999999;
    margin-left: 8px;
`;
var StyledSeriesLabel = styled_components_default.div`
    margin-top: 7px;
    color: white;
`;
var StyledWrapper = styled_components_default.div`
    display: flex;
    align-items: center;
    gap: ${themes_exports.variables.spacingXSmall};
    align-self: stretch;
`;
var StyledFormattedDate = styled_components_default.div`
    color: ${themes_exports.variables.contentColorDefault};
    font-size: 10px;
    font-style: normal;
    line-height: ${themes_exports.variables.spacingLarge};
`;
var StyledFormattedValue = styled_components_default.div`
    color: ${themes_exports.variables.contentColorActive};
    font-size: 10px;
    font-style: normal;
    font-weight: ${themes_exports.variables.fontWeightBold};
    line-height: ${themes_exports.variables.spacingLarge};
    flex: 1 0 0;
`;
var getFormattedDate = (cursorState, data, locale) => {
  var _a;
  let formattedDate = null;
  if (cursorState.cursor) {
    const time = data.columns[0][(_a = cursorState.cursor) == null ? void 0 : _a.index];
    if (time) {
      formattedDate = formatTimestamp(time * 1e3, "dateVerboseTimePrecise", locale);
    }
  }
  return formattedDate;
};
var getFormattedValue = (plotUtilities, cursorState, data, seriesConfig, scaleConfig, seriesIndex) => {
  var _a;
  const selectedSeries = plotUtilities.allSeries[seriesIndex];
  let formattedValue = "-";
  if (cursorState.cursor) {
    const v = data.columns[seriesIndex][(_a = cursorState.cursor) == null ? void 0 : _a.index];
    const config = getMergedSeriesConfigForField(seriesConfig, scaleConfig, selectedSeries.field);
    if (v !== null) {
      formattedValue = formatValueWithSeriesConfig(v, config, data);
    }
  }
  return formattedValue;
};
var hasCursorState = (cursorState, lowerBound, upperBound) => cursorState != null && cursorState.state !== "off" && cursorState.cursor != null && cursorState.cursor.left >= lowerBound && cursorState.cursor.left <= upperBound && cursorState.seriesIndex != null;
var BasicMultiValueTooltip = (props) => {
  var _a;
  const {
    plotUtilities,
    seriesConfig,
    scaleConfig,
    data,
    cursorState,
    userLocale,
    isTimeSeries,
    rawXaxisValues,
    tooltipLabelComponent
  } = props;
  const theme = useVizTheme();
  const cursorIndex = (_a = cursorState.cursor) == null ? void 0 : _a.index;
  const rawFormattedData = rawXaxisValues && rawXaxisValues[cursorIndex] ? rawXaxisValues[cursorIndex] : "";
  const formattedData = isTimeSeries ? getFormattedDate(cursorState, data, userLocale) : rawFormattedData;
  let { precomponent } = props;
  if ((0, lodash_exports.isFunction)(precomponent)) {
    precomponent = precomponent(props);
  }
  return /* @__PURE__ */ react_default.createElement(
    "div",
    {
      style: {
        borderRadius: 5,
        backgroundColor: theme.tooltip.backgroundColor,
        color: theme.tooltip.color,
        margin: "0 5px",
        padding: "5px 10px",
        fontSize: "14px",
        textAlign: "left"
      }
    },
    tooltipLabelComponent && /* @__PURE__ */ react_default.createElement("div", null, tooltipLabelComponent),
    formattedData && /* @__PURE__ */ react_default.createElement(
      "div",
      {
        style: {
          color: "#ccc",
          fontSize: "12px",
          marginBottom: 1
        }
      },
      formattedData
    ),
    precomponent && /* @__PURE__ */ react_default.createElement("div", null, precomponent),
    plotUtilities.allSeries.slice(1).map((s, i) => {
      var _a2, _b;
      const formattedValue = getFormattedValue(
        plotUtilities,
        cursorState,
        data,
        seriesConfig,
        scaleConfig,
        i + 1
      );
      return /* @__PURE__ */ react_default.createElement(
        "div",
        {
          key: s.label,
          style: {
            display: "flex",
            flexDirection: "row",
            fontWeight: i + 1 === cursorState.seriesIndex ? "bolder" : void 0
          }
        },
        /* @__PURE__ */ react_default.createElement(
          "div",
          {
            style: {
              marginTop: 8,
              marginRight: 8,
              width: 7,
              height: 7,
              borderRadius: 5,
              backgroundColor: ((_a2 = s.fill) == null ? void 0 : _a2.toString()) || ((_b = s.stroke) == null ? void 0 : _b.toString()) || "transparent"
            }
          }
        ),
        /* @__PURE__ */ react_default.createElement("div", null, s.label, ": ", formattedValue)
      );
    })
  );
};
var BasicMultiValueTooltipFactory = ({ precomponent: label, tooltipLabelComponent }) => {
  const component = (componentProps) => /* @__PURE__ */ react_default.createElement(
    BasicMultiValueTooltip,
    __spreadProps(__spreadValues({}, componentProps), {
      precomponent: label,
      tooltipLabelComponent
    })
  );
  return component;
};
var BasicSingleValueTooltip = (props) => {
  var _a;
  const {
    plotUtilities,
    seriesConfig,
    scaleConfig,
    data,
    cursorState,
    chartTitle,
    xAxisResolution,
    userLocale,
    hideTooltipSeriesLabel,
    isTimeSeries,
    rawXaxisValues,
    tooltipLabelComponent
  } = props;
  const resolutionInSeconds = xAxisResolution || getXAxisResolution(props.data);
  const resolutionText = formatDurationMicros(resolutionInSeconds * SECOND_TO_MICROSECOND);
  const theme = useVizTheme();
  if (cursorState.state === "off" || cursorState.seriesIndex === null) {
    return null;
  }
  const selectedSeries = plotUtilities.allSeries[cursorState.seriesIndex];
  const showTooltipSeriesLabel = chartTitle !== selectedSeries.label && !hideTooltipSeriesLabel;
  const cursorIndex = (_a = cursorState.cursor) == null ? void 0 : _a.index;
  const rawFormattedData = rawXaxisValues && rawXaxisValues[cursorIndex] ? rawXaxisValues[cursorIndex] : "";
  const formattedData = isTimeSeries ? getFormattedDate(cursorState, data, userLocale) : rawFormattedData;
  const formattedValue = getFormattedValue(
    plotUtilities,
    cursorState,
    data,
    seriesConfig,
    scaleConfig,
    cursorState.seriesIndex
  );
  let { precomponent } = props;
  if ((0, lodash_exports.isFunction)(precomponent)) {
    precomponent = precomponent(props);
  }
  return /* @__PURE__ */ react_default.createElement(
    "div",
    {
      style: {
        borderRadius: 5,
        backgroundColor: theme.tooltip.backgroundColor,
        color: theme.tooltip.color,
        margin: "0 5px",
        padding: "5px 10px",
        fontSize: "14px",
        textAlign: "left"
      }
    },
    tooltipLabelComponent && /* @__PURE__ */ react_default.createElement("div", null, tooltipLabelComponent),
    formattedData && /* @__PURE__ */ react_default.createElement(
      "div",
      {
        style: {
          color: "#ccc",
          fontSize: "12px",
          marginBottom: 1
        }
      },
      formattedData
    ),
    precomponent && /* @__PURE__ */ react_default.createElement("div", null, precomponent),
    /* @__PURE__ */ react_default.createElement("div", { key: selectedSeries.label }, /* @__PURE__ */ react_default.createElement(StyledSeriesLabel, null, showTooltipSeriesLabel && /* @__PURE__ */ react_default.createElement("div", null, chartTitle), /* @__PURE__ */ react_default.createElement("div", { "data-test": "timeseries-tooltip-label" }, selectedSeries.label)), /* @__PURE__ */ react_default.createElement(StyledPointValue, null, /* @__PURE__ */ react_default.createElement(StyledSeriesIcon, { series: selectedSeries }), /* @__PURE__ */ react_default.createElement("div", { "data-test": "timeseries-tooltip-value" }, formattedValue), isTimeSeries && /* @__PURE__ */ react_default.createElement(StyledResolution, { "data-test": "timeseries-tooltip-resolution" }, "resolution ", resolutionText)))
  );
};
var TooltipOutsideChart = ({
  plotUtilities,
  seriesConfig = {},
  scaleConfig = {},
  data,
  cursorState,
  userLocale,
  eventAnnotationCursorState,
  isTimeSeries = true,
  rawXaxisValues
}) => {
  var _a, _b;
  if (plotUtilities === void 0 || data === void 0 || !hasCursorState(cursorState, 0, plotUtilities.dimensions.over.width) && !eventAnnotationCursorState) {
    return null;
  }
  let formattedData = null;
  let formattedValue = "-";
  if (eventAnnotationCursorState) {
    formattedData = `${formatTimestamp(
      eventAnnotationCursorState.time * 1e3,
      "dateVerboseTimePrecise",
      userLocale
    )}:`;
    formattedValue = eventAnnotationCursorState.type === Alert ? DefaultAnnotationLabels[eventAnnotationCursorState.severity || CriticalSeverity] : eventAnnotationCursorState.key;
  } else if (cursorState && cursorState.seriesIndex) {
    const rawFormattedData = rawXaxisValues && rawXaxisValues[(_a = cursorState.cursor) == null ? void 0 : _a.index] ? rawXaxisValues[(_b = cursorState.cursor) == null ? void 0 : _b.index] : "";
    formattedData = isTimeSeries ? `${getFormattedDate(cursorState, data, userLocale)}:` : rawFormattedData;
    formattedValue = getFormattedValue(
      plotUtilities,
      cursorState,
      data,
      seriesConfig,
      scaleConfig,
      cursorState.seriesIndex
    );
  }
  return /* @__PURE__ */ react_default.createElement(StyledWrapper, null, formattedData && /* @__PURE__ */ react_default.createElement(StyledFormattedDate, { "data-test": "tooltip-data" }, formattedData), /* @__PURE__ */ react_default.createElement(StyledFormattedValue, { "data-test": "tooltip-value" }, formattedValue));
};
var BasicSingleValueTooltipFactory = ({ precomponent: label, tooltipLabelComponent }) => {
  const component = (componentProps) => /* @__PURE__ */ react_default.createElement(
    BasicSingleValueTooltip,
    __spreadProps(__spreadValues({}, componentProps), {
      precomponent: label,
      tooltipLabelComponent
    })
  );
  return component;
};
var InternalTooltipContainer = (props) => {
  const { direction, left, plotWidth, active } = props;
  const theme = useVizTheme();
  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
    "div",
    {
      className: "olly-viz-tooltip-line",
      style: {
        position: "absolute",
        backgroundColor: active ? theme.tooltip.lineStroke : theme.tooltip.inactiveLineStroke,
        width: "1px",
        top: 0,
        bottom: 0,
        left: `${left - 0.5}px`
      }
    }
  ), active && /* @__PURE__ */ react_default.createElement(
    "div",
    {
      className: "olly-viz-tooltip-body",
      style: {
        position: "absolute",
        top: 0,
        left: direction === "right" ? `${left}px` : void 0,
        right: direction === "left" ? `${plotWidth - left}px` : void 0
      }
    },
    props.children
  ));
};
var DataSeriesTooltipContainer = (props) => {
  const {
    cursorState,
    data,
    plotUtilities,
    seriesConfig = {},
    scaleConfig = {},
    tooltip: tooltipBody = BasicSingleValueTooltip,
    chartTitle,
    xAxisResolution,
    userLocale,
    hideTooltipSeriesLabel,
    showTooltipOutsideChart = false,
    isTimeSeries = true,
    rawXaxisValues = []
  } = props;
  if (plotUtilities === void 0 || !cursorState || cursorState.state === "off" || cursorState.cursor === null || cursorState.cursor.left < 0 || cursorState.cursor.left > plotUtilities.dimensions.over.width || data === void 0) {
    return null;
  }
  const { width: plotWidth } = plotUtilities.dimensions.over;
  const { left } = cursorState.cursor;
  const direction = left < plotWidth / 2 ? "right" : "left";
  return /* @__PURE__ */ react_default.createElement(
    InternalTooltipContainer,
    {
      left,
      plotWidth,
      direction,
      active: cursorState.active && !showTooltipOutsideChart
    },
    react_default.createElement(tooltipBody, {
      data,
      plotUtilities,
      cursorState,
      direction,
      seriesConfig,
      scaleConfig,
      chartTitle,
      xAxisResolution,
      userLocale,
      hideTooltipSeriesLabel,
      isTimeSeries,
      rawXaxisValues
    })
  );
};
var EventAnnotationTooltipContainer = (props) => {
  const {
    plotUtilities,
    eventAnnotationCursorState,
    eventAnnotationConfig,
    eventAnnotationTooltip = BasicEventAnnotationTooltip,
    showTooltipOutsideChart = false,
    userLocale
  } = props;
  const theme = useVizTheme();
  if (!eventAnnotationCursorState || !plotUtilities) {
    return null;
  }
  const { width: plotWidth } = plotUtilities.dimensions.over;
  const left = plotUtilities.valToPos(eventAnnotationCursorState.time, "x");
  const direction = left < plotWidth / 2 ? "right" : "left";
  return /* @__PURE__ */ react_default.createElement(
    InternalTooltipContainer,
    {
      left,
      plotWidth,
      direction,
      active: !showTooltipOutsideChart
    },
    react_default.createElement(eventAnnotationTooltip, {
      eventAnnotationCursorState,
      eventAnnotationConfig,
      direction,
      theme,
      userLocale
    })
  );
};
var TooltipContainer = (props) => {
  const {
    plotUtilities,
    tooltip,
    cursorState,
    data,
    seriesConfig,
    scaleConfig,
    eventAnnotationCursorState,
    eventAnnotationConfig,
    eventAnnotationTooltip,
    chartTitle,
    xAxisResolution,
    userLocale,
    hideTooltipSeriesLabel,
    showTooltipOutsideChart = false,
    isTimeSeries = true,
    rawXaxisValues = []
  } = props;
  if (tooltip === false) {
    return null;
  }
  if (exists(eventAnnotationCursorState)) {
    return /* @__PURE__ */ react_default.createElement(
      EventAnnotationTooltipContainer,
      {
        plotUtilities,
        eventAnnotationCursorState,
        eventAnnotationConfig,
        eventAnnotationTooltip,
        showTooltipOutsideChart,
        userLocale
      }
    );
  }
  return /* @__PURE__ */ react_default.createElement(
    DataSeriesTooltipContainer,
    {
      cursorState,
      data,
      plotUtilities,
      tooltip,
      seriesConfig,
      scaleConfig,
      chartTitle,
      xAxisResolution,
      userLocale,
      hideTooltipSeriesLabel,
      showTooltipOutsideChart,
      isTimeSeries,
      rawXaxisValues
    }
  );
};

export {
  BasicMultiValueTooltip,
  BasicMultiValueTooltipFactory,
  BasicSingleValueTooltip,
  TooltipOutsideChart,
  BasicSingleValueTooltipFactory,
  DataSeriesTooltipContainer,
  EventAnnotationTooltipContainer,
  TooltipContainer
};
//# sourceMappingURL=chunk-ZTIQPCUC.js.map
