const _excluded = ["isHovered"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useCallback } from 'react';
import { useCelestialNodeActionsContext } from '../../shared/contexts/node_actions_context';
import { useElementHover } from '../../shared/hooks/use_element_hover.hook';
import { formatCount } from '../../shared/utils/format_count';
import { Legend } from '../health_donut/components/legend';
import { NodeShell } from './node_shell';
import { HealthArc } from './health_arc';
import './service_circle_node.scss';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Circle node with health arc segments, interior icon/metric, and label below.
 * Inspired by Datadog/Grafana service map visualizations.
 */
export const ServiceCircleNode = _ref => {
  var _circleDiameter, _data$metrics, _data$color, _data$metrics2, _data$metrics$faults, _data$metrics3, _data$metrics$errors, _data$metrics4, _data$metrics$request, _data$metrics5, _data$metrics$faults2, _data$metrics6, _data$metrics$errors2, _data$metrics7;
  let {
    data
  } = _ref;
  const {
    onDashboardClick,
    selectedNodeId
  } = useCelestialNodeActionsContext();
  const _useElementHover = useElementHover(),
    {
      isHovered
    } = _useElementHover,
    hoverHandlers = _objectWithoutProperties(_useElementHover, _excluded);
  const isSelected = data.id === selectedNodeId;
  const diameter = (_circleDiameter = data.circleDiameter) !== null && _circleDiameter !== void 0 ? _circleDiameter : 80;
  const hasMetrics = !!((_data$metrics = data.metrics) !== null && _data$metrics !== void 0 && _data$metrics.requests);
  const glowColor = (_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : 'var(--osd-color-type-service)';
  const totalRequests = formatCount((_data$metrics2 = data.metrics) === null || _data$metrics2 === void 0 ? void 0 : _data$metrics2.requests);
  const handleClick = useCallback(event => {
    onDashboardClick === null || onDashboardClick === void 0 || onDashboardClick(event, data);
  }, [onDashboardClick, data]);
  const arcSegments = [{
    value: (_data$metrics$faults = (_data$metrics3 = data.metrics) === null || _data$metrics3 === void 0 ? void 0 : _data$metrics3.faults5xx) !== null && _data$metrics$faults !== void 0 ? _data$metrics$faults : 0,
    color: 'var(--osd-color-faults)'
  }, {
    value: (_data$metrics$errors = (_data$metrics4 = data.metrics) === null || _data$metrics4 === void 0 ? void 0 : _data$metrics4.errors4xx) !== null && _data$metrics$errors !== void 0 ? _data$metrics$errors : 0,
    color: 'var(--osd-color-errors)'
  }, {
    value: ((_data$metrics$request = (_data$metrics5 = data.metrics) === null || _data$metrics5 === void 0 ? void 0 : _data$metrics5.requests) !== null && _data$metrics$request !== void 0 ? _data$metrics$request : 0) - ((_data$metrics$faults2 = (_data$metrics6 = data.metrics) === null || _data$metrics6 === void 0 ? void 0 : _data$metrics6.faults5xx) !== null && _data$metrics$faults2 !== void 0 ? _data$metrics$faults2 : 0) - ((_data$metrics$errors2 = (_data$metrics7 = data.metrics) === null || _data$metrics7 === void 0 ? void 0 : _data$metrics7.errors4xx) !== null && _data$metrics$errors2 !== void 0 ? _data$metrics$errors2 : 0),
    color: 'var(--osd-color-ok)'
  }];
  return /*#__PURE__*/_jsx(NodeShell, {
    isSelected: isSelected,
    isFaded: !!data.isFaded,
    onClick: handleClick,
    glowColor: glowColor,
    disableGlow: true,
    className: "osd:bg-transparent osd:border-0 osd:rounded-full",
    style: {
      border: 'none',
      borderRadius: '50%',
      background: 'transparent'
    },
    "data-test-subj": "serviceCircleNode-".concat(data.id),
    children: /*#__PURE__*/_jsxs("div", {
      className: "celServiceCircle",
      children: [/*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
        className: "celServiceCircle__container".concat(isSelected ? ' celServiceCircle__container--selected' : '').concat(!hasMetrics ? ' celServiceCircle__container--no-metrics' : '')
      }, hoverHandlers), {}, {
        style: _objectSpread({
          width: diameter,
          height: diameter,
          '--osd-node-glow-color': glowColor
        }, data.color && !hasMetrics ? {
          borderColor: data.color
        } : {}),
        children: [hasMetrics && /*#__PURE__*/_jsx(HealthArc, {
          segments: arcSegments,
          diameter: diameter,
          strokeWidth: 6,
          "aria-label": "Health: ".concat(totalRequests, " requests")
        }), /*#__PURE__*/_jsxs("div", {
          className: "celServiceCircle__interior",
          children: [data.icon && /*#__PURE__*/_jsx("div", {
            className: "osd:flex osd:items-center osd:justify-center osd:w-6 osd:h-6 osd:text-icon",
            children: data.icon
          }), hasMetrics && /*#__PURE__*/_jsx("span", {
            className: "osd:text-xs osd:font-bold osd:text-body-default",
            children: totalRequests
          })]
        })]
      })), isHovered && hasMetrics && /*#__PURE__*/_jsx(Legend, {
        metrics: data.metrics,
        health: data.health,
        trianglePosition: "left"
      }), /*#__PURE__*/_jsxs("div", {
        className: "celServiceCircle__label",
        children: [/*#__PURE__*/_jsx("div", {
          className: "osd:text-xs osd:font-bold osd:text-body-default osd:truncate",
          children: data.title
        }), data.subtitle && /*#__PURE__*/_jsx("div", {
          className: "osd:text-xs osd:text-body-secondary osd:truncate",
          children: data.subtitle
        })]
      })]
    })
  });
};