"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LegendPanel = void 0;
var _react = _interopRequireWildcard(require("react"));
var _t = require("../../shared/i18n/t");
var _use_on_click_outside = require("../../shared/hooks/use_on_click_outside.hook");
var _resources = require("../../shared/resources");
var _labels = require("../labels");
var _health_donut = require("../health_donut");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

const LegendPanel = ({
  onClose,
  showSliSlo = false
}) => {
  const legendRef = (0, _react.useRef)(null);

  // closes menu if user clicks outside of the node
  (0, _use_on_click_outside.useOnClickOutside)(legendRef, onClose);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: legendRef,
    className: "osd:w-58 osd:h-80 osd:bg-container-default osd:rounded-xl osd:shadow-xl osd:z-50 osd:overflow-auto",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "osd:p-4 osd:grid osd:gap-3 osd:text-body-secondary",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "osd:flex osd:justify-between osd:items-center",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
          className: "osd:font-bold osd:text-sm",
          children: (0, _t.t)('legend.title')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          onClick: onClose,
          className: "osd-resetFocusState osd:hover:text-interactive osd:cursor-pointer",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
            src: _resources.CloseIcon,
            className: "celIcon",
            alt: ""
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "osd:flex osd:justify-center osd:items-center osd:py-2",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_health_donut.HealthDonut, {
          metrics: {
            requests: 100,
            faults5xx: 35,
            errors4xx: 25
          },
          size: 60
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
        className: "osd:grid osd:gap-2",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labels.FaultsLabel, {
            text: (0, _t.t)('legend.faults')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labels.ErrorsLabel, {
            text: (0, _t.t)('legend.errors')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labels.OkLabel, {
            text: (0, _t.t)('legend.ok')
          })
        })]
      }), showSliSlo && /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
        className: "osd:grid osd:gap-0.5 osd:-ml-0.5",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labels.BreachedLabel, {
            text: (0, _t.t)('legend.activeSLIBreach')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labels.RecoveredLabel, {
            text: (0, _t.t)('legend.recoveredSLI')
          })
        })]
      })]
    })
  });
};
exports.LegendPanel = LegendPanel;