"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CelestialCard = void 0;
var _react = _interopRequireWildcard(require("react"));
var _resources = require("../../shared/resources");
var _node_actions_context = require("../../shared/contexts/node_actions_context");
var _t = require("../../shared/i18n/t");
var _common = require("../../shared/constants/common.constants");
var _format_count = require("../../shared/utils/format_count");
var _description = require("../description");
var _health_donut = require("../health_donut");
var _view_insights_button = require("./components/view_insights_button");
var _sli_status = require("./components/sli_status");
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 CelestialCard = props => {
  var _stackedNodeIds$lengt;
  const {
    id,
    icon,
    title,
    subtitle,
    platform,
    health,
    isGroup,
    numberOfServices,
    metrics,
    isFaded,
    color,
    stackedNodeIds
  } = props;
  const nodeRef = (0, _react.useRef)(null);
  const {
    onGroupToggle,
    onDashboardClick,
    selectedNodeId
  } = (0, _node_actions_context.useCelestialNodeActionsContext)();
  const totalRequests = (0, _format_count.formatCount)(metrics === null || metrics === void 0 ? void 0 : metrics.requests);
  const isSliStatusDisplayed = (health === null || health === void 0 ? void 0 : health.status) && ['breached', 'recovered'].includes(health === null || health === void 0 ? void 0 : health.status);

  // Determine if this card is selected based on context
  const isSelected = id === selectedNodeId;
  const onViewDashboardClick = (0, _react.useCallback)(event => {
    // Selection state is handled by context now
    onDashboardClick === null || onDashboardClick === void 0 || onDashboardClick(event, props);
  }, [onDashboardClick, props]);
  const onDoubleClick = (0, _react.useCallback)(event => {
    if (isGroup) {
      onGroupToggle === null || onGroupToggle === void 0 || onGroupToggle(event, props);
    }
  }, [onGroupToggle, isGroup, props]);
  const customColorStyle = !(health !== null && health !== void 0 && health.breached) && color ? {
    borderColor: color,
    '--osd-node-glow-color': color
  } : {};
  const isAggregated = ((_stackedNodeIds$lengt = stackedNodeIds === null || stackedNodeIds === void 0 ? void 0 : stackedNodeIds.length) !== null && _stackedNodeIds$lengt !== void 0 ? _stackedNodeIds$lengt : 0) > 0;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: nodeRef,
    style: customColorStyle,
    className: `osd:w-68 osd:min-h-24 osd:rounded-xl osd:p-3 osd:flex osd:justify-center osd:items-center osd:border-2 osd:box-border 'border-solid'
                ${health !== null && health !== void 0 && health.breached ? 'osd:bg-container-breached osd:border-status-breached' : 'osd:bg-container-default osd:border-status-default'}
                ${health !== null && health !== void 0 && health.breached ? 'osd:hover:border-status-breached-hover' : color ? '' : 'osd:hover:border-status-default-hover'}
                ${isSelected ? 'osd:outline-2 osd:outline-blue-500 osd:outline-offset-4 osd:shadow-node-selected' : ''} 
                ${isFaded ? 'osd:opacity-30' : 'osd:opacity-100'} 
                osd:transition-all osd:duration-200`,
    onDoubleClick: onDoubleClick,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "osd:grid osd:grid-cols-58",
        children: [!!icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "osd:col-span-14",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_health_donut.HealthDonut, {
            metrics: metrics || {
              ..._common.DEFAULT_METRICS
            },
            size: 60,
            icon: icon,
            isLegendEnabled: true
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: `osd:col-span-44 osd:flex osd:flex-col osd:justify-center ${isSliStatusDisplayed ? 'osd:-mt-2' : ''}`,
          children: [isSliStatusDisplayed && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "osd:col-span-44 osd:flex osd:flex-row-reverse osd:mb-0.5",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sli_status.SliStatus, {
              status: health === null || health === void 0 ? void 0 : health.status
            })
          }), isGroup ?
          /*#__PURE__*/
          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
          (0, _jsxRuntime.jsxs)("div", {
            className: "osd:flex osd:items-center osd:group osd:hover:cursor-pointer osd:pl-1",
            onClick: e => onGroupToggle === null || onGroupToggle === void 0 ? void 0 : onGroupToggle(e, props),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              className: "osd-resetFocusState osd:text-group-caret osd:transition-colors osd:mr-0 osd:bg-transparent osd:border-0 osd:p-0",
              "aria-expanded": false,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                src: _resources.ActionsIcon,
                className: "osd:w-4 osd:h-4 osd:transition-transform osd:duration-200 osd:rotate-0 osd:group-hover:rotate-90",
                alt: ""
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
              className: "osd-resetFocusState osd:font-bold osd:text-sm osd:text-link-default osd:hover:text-link-hover osd:transition-colors osd:truncate",
              children: title
            })]
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "osd:font-bold osd:text-sm osd:text-body-default osd:transition-colors osd:pl-2 osd:truncate",
            children: title
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "osd:text-xs osd:text-body-secondary osd:pl-2 osd:truncate",
            children: subtitle
          })]
        })]
      }), !isAggregated && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "osd:grid osd:grid-cols-58 osd:py-2",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "osd:col-span-16",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_description.Description, {
            className: "osd:pr-1",
            label: (0, _t.t)('node.labels.requests'),
            value: totalRequests
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "osd:col-span-42 osd:flex osd:flex-col osd:justify-center osd:border-l-1 osd:border-divider-default",
          children: isGroup || platform ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_description.Description, {
            className: "osd:pl-2.5",
            label: isGroup ? (0, _t.t)('node.labels.services') : (0, _t.t)('node.labels.platform'),
            value: isGroup ? `${numberOfServices}` : platform
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "osd:flex osd:flex-row-reverse osd:flex-grow osd:text-xs osd:items-end",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view_insights_button.ViewInsightsButton, {
              onClick: onViewDashboardClick
            })
          })
        })]
      }), (isGroup || platform) && !isAggregated && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "osd:flex osd:flex-row-reverse osd:text-xs",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view_insights_button.ViewInsightsButton, {
          onClick: onViewDashboardClick
        })
      })]
    })
  });
};
exports.CelestialCard = CelestialCard;