/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useRef } from 'react';
import { LegendIcon } from '../../shared/resources';
import { t } from '../../shared/i18n/t';
import { LegendPanel } from './legend_panel';
import { Portal } from '../portal';
import { useLegend } from './hooks/use_legend.hook';
import { useOnClickOutside } from '../../shared/hooks/use_on_click_outside.hook';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Legend = _ref => {
  let {
    showSliSlo,
    children
  } = _ref;
  const {
    ref,
    isOpen,
    position,
    onClose,
    onToggle
  } = useLegend();
  const customRef = useRef(null);
  useOnClickOutside(customRef, onClose);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx("button", {
      ref: ref,
      onClick: onToggle,
      className: "osd-resetFocusState osd:flex osd:items-center osd:justify-center osd:w-10 osd:h-10 osd:rounded-full osd:bg-container-default osd:shadow-md osd:hover:shadow-xl osd:text-body-secondary osd:hover:text-interactive osd:transition-all osd:duration-300 osd:cursor-pointer",
      "aria-label": t("legend.toggle"),
      children: /*#__PURE__*/_jsx("img", {
        src: LegendIcon,
        className: "celIcon",
        alt: ""
      })
    }), isOpen && /*#__PURE__*/_jsx(Portal, {
      position: position !== null && position !== void 0 ? position : {},
      children: children ? /*#__PURE__*/_jsx("div", {
        ref: customRef,
        children: children
      }) : /*#__PURE__*/_jsx(LegendPanel, {
        onClose: onClose,
        showSliSlo: showSliSlo
      })
    })]
  });
};