"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FieldPreviewHeader = void 0;
var _react = _interopRequireDefault(require("react"));
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _state_utils = require("../../state_utils");
var _field_editor_context = require("../field_editor_context");
var _field_preview_context = require("./field_preview_context");
var _is_updating_indicator = require("./is_updating_indicator");
/*
 * 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 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

const i18nTexts = {
  title: _i18n.i18n.translate('indexPatternFieldEditor.fieldPreview.title', {
    defaultMessage: 'Preview'
  }),
  customData: _i18n.i18n.translate('indexPatternFieldEditor.fieldPreview.subTitle.customData', {
    defaultMessage: 'Custom data'
  })
};
const isLoadingSelector = state => state.isLoadingDocuments;
const documentSourceSelector = state => state.documentSource;
const FieldPreviewHeader = () => {
  const {
    dataView
  } = (0, _field_editor_context.useFieldEditorContext)();
  const {
    controller
  } = (0, _field_preview_context.useFieldPreviewContext)();
  const isFetchingDocument = (0, _state_utils.useStateSelector)(controller.state$, isLoadingSelector);
  const documentSource = (0, _state_utils.useStateSelector)(controller.state$, documentSourceSelector);
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiTitle, {
    size: "s"
  }, /*#__PURE__*/_react.default.createElement("h2", {
    "data-test-subj": "title"
  }, i18nTexts.title))), isFetchingDocument && /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    "data-test-subj": "isFetchingDocumentIndicator"
  }, /*#__PURE__*/_react.default.createElement(_is_updating_indicator.IsUpdatingIndicator, null))), /*#__PURE__*/_react.default.createElement(_eui.EuiText, null, /*#__PURE__*/_react.default.createElement(_eui.EuiTextColor, {
    color: "subdued",
    "data-test-subj": "subTitle"
  }, _i18n.i18n.translate('indexPatternFieldEditor.fieldPreview.subTitle', {
    defaultMessage: 'From: {documentSource}',
    values: {
      documentSource: documentSource === 'cluster' ? dataView.getIndexPattern() : i18nTexts.customData
    }
  }))));
};
exports.FieldPreviewHeader = FieldPreviewHeader;