/* 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 {
  styled_components_default,
  styled_components_exports
} from "./chunk-5LUILIR3.js";
import {
  exists
} from "./chunk-6N4JNZ5S.js";
import {
  react_default,
  react_exports
} from "./chunk-V3S5WUKN.js";
import {
  __export,
  __reExport
} from "./chunk-XC4WXK3L.js";

// esm-externals:@splunk/react-icons/SVG
var SVG_exports = {};
__export(SVG_exports, {
  default: () => SVG_default
});
__reExport(SVG_exports, SVG_star);
import * as defaultImport from "@splunk/react-icons/SVG";
import * as SVG_star from "@splunk/react-icons/SVG";
var SVG_default = "default" in defaultImport ? defaultImport.default : defaultImport;

// src/icons/CloseIcon.tsx
var CloseIcon = () => /* @__PURE__ */ react_default.createElement(
  SVG_default,
  {
    width: "12",
    height: "12",
    viewBox: "0 0 20 20",
    xmlns: "http://www.w3.org/2000/svg",
    "aria-label": "Close icon",
    inline: true
  },
  /* @__PURE__ */ react_default.createElement(
    "polygon",
    {
      points: "10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644",
      style: { fill: "rgba(0, 0, 0, 0.4)" }
    }
  )
);

// src/icons/ZoomIcon.tsx
var ZoomIcon = () => /* @__PURE__ */ react_default.createElement(
  SVG_default,
  {
    width: "12",
    height: "12",
    viewBox: "0 0 20 20",
    xmlns: "http://www.w3.org/2000/svg",
    "aria-label": "Close icon",
    inline: true
  },
  /* @__PURE__ */ react_default.createElement(
    "path",
    {
      d: "M7,7 L5,7 L5,9 L7,9 L7,11 L9,11 L9,9 L11,9 L11,7 L9,7 L9,5 L7,5 L7,7 Z M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z",
      style: { fill: "rgba(0,0,0,0.4)" }
    }
  )
);

// src/RangeSelection.tsx
var StyledIconWrapper = styled_components_default.div`
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    margin: 3px 6px;
    cursor: pointer;
    padding: 4px;
`;
var RangeSelection = react_default.memo((props) => {
  var _a;
  if ((_a = props.cursorState) == null ? void 0 : _a.selection) {
    return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
      "div",
      {
        className: "olly-viz-select-box",
        style: {
          position: "absolute",
          border: "3px solid #ccc",
          top: 0,
          bottom: 0,
          left: Math.max(0, props.cursorState.selection.left),
          width: Math.max(0, props.cursorState.selection.width)
        }
      }
    ));
  }
  if (!exists(props.rangeSelection) || !exists(props.plotUtilities)) {
    return null;
  }
  const left = props.plotUtilities.valToPos(props.rangeSelection.start, "x");
  const right = props.plotUtilities.valToPos(props.rangeSelection.end, "x");
  const width = right - left;
  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
    "div",
    {
      className: "olly-viz-select-left",
      style: {
        position: "absolute",
        background: `rgba(100,100,100,0.3)`,
        borderRight: "3px solid rgba(100,100,100,0.5)",
        top: 0,
        bottom: 0,
        left: 0,
        width: left
      }
    }
  ), /* @__PURE__ */ react_default.createElement(
    "div",
    {
      className: "olly-viz-select-right",
      style: {
        position: "absolute",
        background: `rgba(100,100,100,0.3)`,
        borderLeft: "3px solid rgba(100,100,100,0.5)",
        top: 0,
        bottom: 0,
        left: left + width,
        right: 0
      }
    }
  ), /* @__PURE__ */ react_default.createElement(
    "div",
    {
      className: "olly-viz-select-controls",
      style: {
        display: "flex",
        flexDirection: "column",
        position: "absolute",
        left: left + width,
        top: 0,
        pointerEvents: "auto"
      }
    },
    props.onRangeDeselection && /* @__PURE__ */ react_default.createElement(
      StyledIconWrapper,
      {
        className: "olly-viz-select-controls-close",
        onClick: (e) => {
          var _a2;
          (_a2 = props.onRangeDeselection) == null ? void 0 : _a2.call(props, e.nativeEvent);
        }
      },
      /* @__PURE__ */ react_default.createElement(CloseIcon, null)
    ),
    props.onRangeZoom && /* @__PURE__ */ react_default.createElement(
      StyledIconWrapper,
      {
        className: "olly-viz-select-controls-zoom",
        onClick: (e) => {
          var _a2;
          if (props.rangeSelection) {
            (_a2 = props.onRangeZoom) == null ? void 0 : _a2.call(props, props.rangeSelection, e.nativeEvent);
          }
        }
      },
      /* @__PURE__ */ react_default.createElement(ZoomIcon, null)
    )
  ));
});

export {
  RangeSelection
};
//# sourceMappingURL=chunk-YOT4BRQD.js.map
