/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */
import React from 'react';
import { useRef } from 'react';
import { t } from '../../shared/i18n/t';
import { useOnClickOutside } from '../../shared/hooks/use_on_click_outside.hook';
import { CloseIcon } from '../../shared/resources';
import { ErrorsLabel, RecoveredLabel, BreachedLabel, FaultsLabel, OkLabel } from '../labels';
import { HealthDonut } from '../health_donut';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const LegendPanel = _ref => {
  let {
    onClose,
    showSliSlo = false
  } = _ref;
  const legendRef = useRef(null);

  // closes menu if user clicks outside of the node
  useOnClickOutside(legendRef, onClose);
  return /*#__PURE__*/_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__*/_jsxs("div", {
      className: "osd:p-4 osd:grid osd:gap-3 osd:text-body-secondary",
      children: [/*#__PURE__*/_jsxs("div", {
        className: "osd:flex osd:justify-between osd:items-center",
        children: [/*#__PURE__*/_jsx("h3", {
          className: "osd:font-bold osd:text-sm",
          children: t('legend.title')
        }), /*#__PURE__*/_jsx("button", {
          onClick: onClose,
          className: "osd-resetFocusState osd:hover:text-interactive osd:cursor-pointer",
          children: /*#__PURE__*/_jsx("img", {
            src: CloseIcon,
            className: "celIcon",
            alt: ""
          })
        })]
      }), /*#__PURE__*/_jsx("div", {
        className: "osd:flex osd:justify-center osd:items-center osd:py-2",
        children: /*#__PURE__*/_jsx(HealthDonut, {
          metrics: {
            requests: 100,
            faults5xx: 35,
            errors4xx: 25
          },
          size: 60
        })
      }), /*#__PURE__*/_jsxs("ul", {
        className: "osd:grid osd:gap-2",
        children: [/*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(FaultsLabel, {
            text: t('legend.faults')
          })
        }), /*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(ErrorsLabel, {
            text: t('legend.errors')
          })
        }), /*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(OkLabel, {
            text: t('legend.ok')
          })
        })]
      }), showSliSlo && /*#__PURE__*/_jsxs("ul", {
        className: "osd:grid osd:gap-0.5 osd:-ml-0.5",
        children: [/*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(BreachedLabel, {
            text: t('legend.activeSLIBreach')
          })
        }), /*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(RecoveredLabel, {
            text: t('legend.recoveredSLI')
          })
        })]
      })]
    })
  });
};