"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getInitialOperatorLabel = exports.StatefulEditDataProvider = exports.HeaderContainer = void 0;
var _fp = require("lodash/fp");
var _eui = require("@elastic/eui");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _data_provider = require("../timeline/data_providers/data_provider");
var _helpers = require("./helpers");
var _components = require("./components");
var i18n = _interopRequireWildcard(require("./translations"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * 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 EDIT_DATA_PROVIDER_WIDTH = 400;
const OPERATOR_COMBO_BOX_WIDTH = 152;
const SAVE_CLASS_NAME = 'edit-data-provider-save';
const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
const HeaderContainer = _styledComponents.default.div`
  width: ${EDIT_DATA_PROVIDER_WIDTH};
`;
exports.HeaderContainer = HeaderContainer;
HeaderContainer.displayName = 'HeaderContainer';
const getInitialOperatorLabel = (isExcluded, operator) => {
  if (operator === ':') {
    return isExcluded ? [{
      label: i18n.IS_NOT
    }] : [{
      label: i18n.IS
    }];
  } else if (operator === 'includes') {
    return isExcluded ? [{
      label: i18n.IS_NOT_ONE_OF
    }] : [{
      label: i18n.IS_ONE_OF
    }];
  } else {
    return isExcluded ? [{
      label: i18n.DOES_NOT_EXIST
    }] : [{
      label: i18n.EXISTS
    }];
  }
};
exports.getInitialOperatorLabel = getInitialOperatorLabel;
const StatefulEditDataProvider = /*#__PURE__*/_react.default.memo(({
  andProviderId,
  browserFields,
  field,
  isExcluded,
  onDataProviderEdited,
  operator,
  providerId,
  timelineId,
  value,
  type = _data_provider.DataProviderType.default
}) => {
  const [updatedField, setUpdatedField] = (0, _react.useState)([{
    label: field
  }]);
  const [updatedOperator, setUpdatedOperator] = (0, _react.useState)(getInitialOperatorLabel(isExcluded, operator));
  const [updatedValue, setUpdatedValue] = (0, _react.useState)(value);
  const showComboBoxInput = (0, _react.useMemo)(() => updatedOperator.length > 0 && (updatedOperator[0].label === i18n.IS_ONE_OF || updatedOperator[0].label === i18n.IS_NOT_ONE_OF), [updatedOperator]);
  const showValueInput = (0, _react.useMemo)(() => type !== _data_provider.DataProviderType.template && updatedOperator.length > 0 && updatedOperator[0].label !== i18n.EXISTS && updatedOperator[0].label !== i18n.DOES_NOT_EXIST && !showComboBoxInput, [showComboBoxInput, type, updatedOperator]);
  const disableSave = (0, _react.useMemo)(() => showComboBoxInput && Array.isArray(updatedValue) && !updatedValue.length, [showComboBoxInput, updatedValue]);

  /** Focuses the Value input if it is visible, falling back to the Save button if it's not */
  const focusInput = () => {
    const elements = document.getElementsByClassName(VALUE_INPUT_CLASS_NAME);
    if (elements.length > 0) {
      elements[0].focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
    } else {
      const saveElements = document.getElementsByClassName(SAVE_CLASS_NAME);
      if (saveElements.length > 0) {
        saveElements[0].focus();
      }
    }
  };
  const onFieldSelected = (0, _react.useCallback)(selectedField => {
    setUpdatedField(selectedField);
    if (type === _data_provider.DataProviderType.template) {
      setUpdatedValue(`{${selectedField[0].label}}`);
    }
    focusInput();
  }, [type]);
  const onOperatorSelected = (0, _react.useCallback)(operatorSelected => {
    setUpdatedOperator(operatorSelected);
    focusInput();
  }, []);
  const onValueChange = (0, _react.useCallback)(changedValue => {
    setUpdatedValue(changedValue);
  }, []);
  const disableScrolling = () => {
    const x = window.pageXOffset !== undefined ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    const y = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    window.onscroll = () => window.scrollTo(x, y);
  };
  const enableScrolling = () => {
    window.onscroll = () => _fp.noop;
  };
  const handleSave = (0, _react.useCallback)(() => {
    onDataProviderEdited({
      andProviderId,
      excluded: (0, _helpers.getExcludedFromSelection)(updatedOperator),
      field: updatedField.length > 0 ? updatedField[0].label : '',
      id: timelineId,
      operator: (0, _helpers.getQueryOperatorFromSelection)(updatedOperator),
      providerId,
      value: updatedValue,
      type
    });
  }, [onDataProviderEdited, andProviderId, updatedOperator, updatedField, timelineId, providerId, updatedValue, type]);
  (0, _react.useEffect)(() => {
    disableScrolling();
    return () => {
      enableScrolling();
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    paddingSize: "s"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    direction: "column",
    gutterSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    label: i18n.FIELD
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiComboBox, {
    autoFocus: true,
    "data-test-subj": "field",
    isClearable: false,
    onChange: onFieldSelected,
    options: (0, _helpers.getCategorizedFieldNames)(browserFields),
    placeholder: i18n.FIELD_PLACEHOLDER,
    selectedOptions: updatedField,
    singleSelection: {
      asPlainText: true
    },
    fullWidth: true
  }))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "m"
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "s",
    direction: "row",
    justifyContent: "spaceBetween"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    label: i18n.OPERATOR
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiComboBox, {
    "data-test-subj": "operator",
    isClearable: false,
    onChange: onOperatorSelected,
    options: _helpers.operatorLabels,
    placeholder: i18n.SELECT_AN_OPERATOR,
    selectedOptions: updatedOperator,
    singleSelection: {
      asPlainText: true
    },
    style: {
      minWidth: OPERATOR_COMBO_BOX_WIDTH
    }
  }))))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "m"
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, showValueInput && /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    label: i18n.VALUE_LABEL
  }, /*#__PURE__*/_react.default.createElement(_components.ControlledDefaultInput, {
    onChangeCallback: onValueChange,
    value: value
  })), showComboBoxInput && type !== _data_provider.DataProviderType.template && /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    label: i18n.VALUE_LABEL
  }, /*#__PURE__*/_react.default.createElement(_components.ControlledComboboxInput, {
    onChangeCallback: onValueChange,
    value: value
  }))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "m"
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, type === _data_provider.DataProviderType.template && showComboBoxInput && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_eui.EuiCallOut, {
    color: "warning",
    iconType: "warning",
    size: "s",
    title: i18n.UNAVAILABLE_OPERATOR(updatedOperator[0].label)
  }), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "m"
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    justifyContent: "flexEnd",
    gutterSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
    className: SAVE_CLASS_NAME,
    color: "primary",
    "data-test-subj": "save",
    fill: true,
    isDisabled: !(0, _helpers.selectionsAreValid)({
      type,
      browserFields,
      selectedField: updatedField,
      selectedOperator: updatedOperator
    }) || disableSave,
    onClick: handleSave,
    size: "m"
  }, i18n.SAVE))))));
});
exports.StatefulEditDataProvider = StatefulEditDataProvider;
StatefulEditDataProvider.displayName = 'StatefulEditDataProvider';