"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SummaryItem = SummaryItem;
exports.getValueLable = getValueLable;
var _eui = require("@elastic/eui");
var _react = _interopRequireDefault(require("react"));
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

function Title({
  title
}) {
  return /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    style: {
      fontWeight: 'bold'
    },
    textAlign: "left"
  }, title);
}
function BaseValue({
  id,
  value,
  icon,
  color
}) {
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "s",
    justifyContent: "flexEnd"
  }, icon ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false,
    style: {
      justifyContent: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
    "data-test-subj": `${id}_${icon}_${color}`,
    type: icon,
    color: color,
    size: "l"
  })) : null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiTextColor, {
    style: {
      fontWeight: 'bold'
    },
    color: color,
    "data-test-subj": `${id}_value`
  }, value)));
}
function getValueLable(value, perc) {
  return perc ? `${value} (${perc})` : `${value}`;
}
function SummaryItem({
  id,
  baseValue,
  baseIcon,
  baseColor,
  comparisonValue,
  title,
  isLoading,
  comparisonPerc,
  comparisonColor,
  comparisonIcon,
  titleHint
}) {
  return /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    hasShadow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiStat, {
    title: /*#__PURE__*/_react.default.createElement(BaseValue, {
      id: id,
      value: baseValue,
      color: baseColor,
      icon: baseIcon
    }),
    titleSize: "m",
    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, titleHint ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
      gutterSize: "s"
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
      grow: false
    }, /*#__PURE__*/_react.default.createElement(Title, {
      title: title
    })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
      grow: false
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
      content: titleHint
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
      type: "questionInCircle"
    })))) : /*#__PURE__*/_react.default.createElement(Title, {
      title: title
    }), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, null)),
    textAlign: "right",
    isLoading: isLoading
  }, !isLoading && comparisonValue ? /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    color: comparisonColor
  }, comparisonIcon ? /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
    "data-test-subj": `${id}_comparison_${comparisonIcon}_${comparisonColor}`,
    type: comparisonIcon
  }) : null, /*#__PURE__*/_react.default.createElement("span", {
    "data-test-subj": `${id}_comparison_value`
  }, getValueLable(comparisonValue, comparisonPerc))) : null));
}