"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ValueLabelsSettings = void 0;
var _react = _interopRequireDefault(require("react"));
var _i18n = require("@kbn/i18n");
var _eui = require("@elastic/eui");
/*
 * 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.
 */

const valueLabelsOptions = [{
  id: `value_labels_hide`,
  value: 'hide',
  label: _i18n.i18n.translate('xpack.lens.shared.valueLabelsVisibility.auto', {
    defaultMessage: 'Hide'
  }),
  'data-test-subj': 'lns_valueLabels_hide'
}, {
  id: `value_labels_inside`,
  value: 'show',
  label: _i18n.i18n.translate('xpack.lens.shared.valueLabelsVisibility.inside', {
    defaultMessage: 'Show'
  }),
  'data-test-subj': 'lns_valueLabels_inside'
}];
const ValueLabelsSettings = ({
  isVisible = true,
  valueLabels = 'hide',
  onValueLabelChange
}) => {
  var _valueLabelsOptions$f;
  if (!isVisible) {
    return null;
  }
  const label = _i18n.i18n.translate('xpack.lens.shared.chartValueLabelVisibilityLabel', {
    defaultMessage: 'Labels'
  });
  const isSelected = ((_valueLabelsOptions$f = valueLabelsOptions.find(({
    value
  }) => value === valueLabels)) === null || _valueLabelsOptions$f === void 0 ? void 0 : _valueLabelsOptions$f.id) || 'value_labels_hide';
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    display: "columnCompressed",
    label: /*#__PURE__*/_react.default.createElement("span", null, label, ' ', /*#__PURE__*/_react.default.createElement(_eui.EuiIconTip, {
      color: "subdued",
      content: _i18n.i18n.translate('xpack.lens.shared.chartValueLabelVisibilityTooltip', {
        defaultMessage: 'If there is not enough space, value labels might be hidden'
      }),
      iconProps: {
        className: 'eui-alignTop'
      },
      position: "top",
      size: "s",
      type: "questionInCircle"
    }))
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonGroup, {
    isFullWidth: true,
    legend: label,
    "data-test-subj": "lens-value-labels-visibility-btn",
    name: "valueLabelsDisplay",
    buttonSize: "compressed",
    options: valueLabelsOptions,
    idSelected: isSelected,
    onChange: modeId => {
      const newMode = valueLabelsOptions.find(({
        id
      }) => id === modeId);
      if (newMode) {
        onValueLabelChange(newMode.value);
      }
    }
  }));
};
exports.ValueLabelsSettings = ValueLabelsSettings;