"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RangesParamEditor = RangesParamEditor;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _i18nReact = require("@kbn/i18n-react");
var _i18n = require("@kbn/i18n");
var _lodash = require("lodash");
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 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 FROM_PLACEHOLDER = '\u2212\u221E';
const TO_PLACEHOLDER = '+\u221E';
const generateId = (0, _eui.htmlIdGenerator)();
const isEmpty = value => value === undefined || value === null;
function RangesParamEditor({
  'data-test-subj': dataTestSubj = 'range',
  addRangeValues,
  error,
  value = [],
  hidePlaceholders,
  setValue,
  setTouched,
  setValidity,
  validateRange
}) {
  const [ranges, setRanges] = (0, _react.useState)(() => value.map(range => ({
    ...range,
    id: generateId()
  })));
  const updateRanges = (0, _react.useCallback)(rangeValues => {
    // do not set internal id parameter into saved object
    setValue(rangeValues.map(range => (0, _lodash.omit)(range, 'id')));
    setRanges(rangeValues);
    if (setTouched) {
      setTouched(true);
    }
  }, [setTouched, setValue]);
  const onAddRange = (0, _react.useCallback)(() => addRangeValues ? updateRanges([...ranges, {
    ...addRangeValues(),
    id: generateId()
  }]) : updateRanges([...ranges, {
    id: generateId()
  }]), [addRangeValues, ranges, updateRanges]);
  const onRemoveRange = id => updateRanges(ranges.filter(range => range.id !== id));
  const onChangeRange = (id, key, newValue) => updateRanges(ranges.map(range => range.id === id ? {
    ...range,
    [key]: newValue === '' ? undefined : parseFloat(newValue)
  } : range));

  // set up an initial range when there is no default range
  (0, _react.useEffect)(() => {
    if (!value.length) {
      onAddRange();
    }
  }, [onAddRange, value.length]);
  (0, _react.useEffect)(() => {
    // responsible for discarding changes
    if (value.length !== ranges.length || value.some((range, index) => !(0, _lodash.isEqual)(range, (0, _lodash.omit)(ranges[index], 'id')))) {
      setRanges(value.map(range => ({
        ...range,
        id: generateId()
      })));
    }
  }, [ranges, value]);
  const hasInvalidRange = validateRange && ranges.some(({
    from,
    to,
    id
  }, index) => {
    const [isFromValid, isToValid] = validateRange({
      from,
      to
    }, index);
    return !isFromValid || !isToValid;
  });
  (0, _react.useEffect)(() => {
    if (setValidity) {
      setValidity(!hasInvalidRange);
    }
  }, [hasInvalidRange, setValidity]);
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
    display: "rowCompressed",
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ranges.map(({
    from,
    to,
    id
  }, index) => {
    const deleteBtnTitle = _i18n.i18n.translate('visDefaultEditor.controls.ranges.removeRangeButtonAriaLabel', {
      defaultMessage: 'Remove the range of {from} to {to}',
      values: {
        from: isEmpty(from) ? FROM_PLACEHOLDER : from,
        to: isEmpty(to) ? TO_PLACEHOLDER : to
      }
    });
    let isFromValid = true;
    let isToValid = true;
    if (validateRange) {
      [isFromValid, isToValid] = validateRange({
        from,
        to
      }, index);
    }
    const gtePrependLabel = _i18n.i18n.translate('visDefaultEditor.controls.ranges.greaterThanOrEqualPrepend', {
      defaultMessage: '\u2265'
    });
    const gteTooltipContent = _i18n.i18n.translate('visDefaultEditor.controls.ranges.greaterThanOrEqualTooltip', {
      defaultMessage: 'Greater than or equal to'
    });
    const ltPrependLabel = _i18n.i18n.translate('visDefaultEditor.controls.ranges.lessThanPrepend', {
      defaultMessage: '\u003c'
    });
    const ltTooltipContent = _i18n.i18n.translate('visDefaultEditor.controls.ranges.lessThanTooltip', {
      defaultMessage: 'Less than'
    });
    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
      key: id
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
      gutterSize: "s",
      alignItems: "center",
      responsive: false
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFieldNumber, {
      "aria-label": _i18n.i18n.translate('visDefaultEditor.controls.ranges.fromLabel', {
        defaultMessage: 'From'
      }),
      "data-test-subj": `${dataTestSubj}${index}__from`,
      value: isEmpty(from) ? '' : from,
      placeholder: hidePlaceholders ? undefined : FROM_PLACEHOLDER,
      onChange: ev => onChangeRange(id, 'from', ev.target.value),
      fullWidth: true,
      compressed: true,
      isInvalid: !isFromValid,
      prepend: /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
        content: gteTooltipContent
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
        size: "s"
      }, gtePrependLabel))
    })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
      grow: false
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
      type: "sortRight",
      color: "subdued"
    })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFieldNumber, {
      "aria-label": _i18n.i18n.translate('visDefaultEditor.controls.ranges.toLabel', {
        defaultMessage: 'To'
      }),
      "data-test-subj": `${dataTestSubj}${index}__to`,
      value: isEmpty(to) ? '' : to,
      placeholder: hidePlaceholders ? undefined : TO_PLACEHOLDER,
      onChange: ev => onChangeRange(id, 'to', ev.target.value),
      fullWidth: true,
      compressed: true,
      isInvalid: !isToValid,
      prepend: /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
        content: ltTooltipContent
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
        size: "s"
      }, ltPrependLabel))
    })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
      grow: false
    }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
      title: deleteBtnTitle,
      "aria-label": deleteBtnTitle,
      disabled: value.length === 1,
      color: "danger",
      iconType: "trash",
      onClick: () => onRemoveRange(id)
    }))), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
      size: "xs"
    }));
  }), hasInvalidRange && error && /*#__PURE__*/_react.default.createElement(_eui.EuiFormErrorText, null, error), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "s"
  }), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonEmpty, {
    "data-test-subj": `${dataTestSubj}__addRangeButton`,
    iconType: "plusInCircleFilled",
    onClick: onAddRange,
    size: "xs"
  }, /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, {
    id: "visDefaultEditor.controls.ranges.addRangeButtonLabel",
    defaultMessage: "Add range"
  })))));
}