"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FieldEditor = FieldEditor;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _reactField = require("@kbn/react-field");
var _classnames = _interopRequireDefault(require("classnames"));
var _style_choices = require("../../helpers/style_choices");
var _helpers = require("../helpers");
var _icon_renderer = require("../icon_renderer");
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.
 */

function FieldEditor({
  field: initialField,
  updateFieldProperties,
  selectField,
  deselectField,
  allFields
}) {
  const [open, setOpen] = (0, _react.useState)(false);
  const [currentField, setCurrentField] = (0, _react.useState)(initialField);
  const {
    color,
    hopSize,
    lastValidHopSize,
    icon,
    name: fieldName
  } = currentField;
  const isDisabled = initialField.hopSize === 0;

  // update local field copy if changed from the outside
  (0, _react.useEffect)(() => {
    if (currentField !== initialField) {
      setCurrentField(initialField);
    }
    // this hook only updates on change of the prop
    // it's meant to reset the internal state on changes outside of the component.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialField]);

  // In case of cleared field and the user closes the popover, restore the initial field
  (0, _react.useEffect)(() => {
    if (!open) {
      setCurrentField(initialField);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);
  function updateField() {
    const {
      name,
      selected,
      type,
      ...updatableProperties
    } = currentField;
    if (fieldName !== initialField.name) {
      deselectField(initialField.name);
      selectField(fieldName);
    }
    updateFieldProperties({
      fieldName,
      fieldProperties: updatableProperties
    });
    setOpen(false);
  }
  function updateProp(name, value) {
    setCurrentField({
      ...currentField,
      [name]: value
    });
  }
  function toggleDisabledState() {
    updateFieldProperties({
      fieldName: initialField.name,
      fieldProperties: {
        hopSize: isDisabled ? initialField.lastValidHopSize : 0,
        lastValidHopSize: isDisabled ? 0 : initialField.hopSize
      }
    });
    setOpen(false);
  }
  const badgeDescription = isDisabled ? _i18n.i18n.translate('xpack.graph.fieldManager.disabledFieldBadgeDescription', {
    defaultMessage: 'Disabled field {field}: Click to configure. Shift+click to enable',
    values: {
      field: fieldName
    }
  }) : _i18n.i18n.translate('xpack.graph.fieldManager.fieldBadgeDescription', {
    defaultMessage: 'Field {field}: Click to configure. Shift+click to disable',
    values: {
      field: fieldName
    }
  });
  return /*#__PURE__*/_react.default.createElement(_eui.EuiPopover, {
    id: `graphFieldEditor-${initialField.name}`,
    anchorPosition: "downCenter",
    ownFocus: true,
    panelPaddingSize: "none",
    button: /*#__PURE__*/_react.default.createElement(_eui.EuiBadge, {
      color: initialField.color,
      iconSide: "right",
      className: (0, _classnames.default)('gphFieldEditor__badge', {
        'gphFieldEditor__badge--disabled': isDisabled
      }),
      onClickAriaLabel: badgeDescription,
      title: "",
      onClick: e => {
        if (e.shiftKey) {
          toggleDisabledState();
        } else {
          setOpen(true);
        }
      }
    }, /*#__PURE__*/_react.default.createElement(_icon_renderer.IconRenderer, {
      className: "gphFieldEditor__badgeIcon",
      icon: initialField.icon,
      color: color
    }), initialField.name),
    isOpen: open,
    closePopover: () => setOpen(false)
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiContextMenu, {
    initialPanelId: "root",
    panels: [{
      id: 'root',
      items: [{
        name: _i18n.i18n.translate('xpack.graph.fieldManager.settingsLabel', {
          defaultMessage: 'Edit settings'
        }),
        icon: /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
          type: "pencil",
          size: "m"
        }),
        panel: 'settings'
      }, {
        name: isDisabled ? _i18n.i18n.translate('xpack.graph.fieldManager.enableFieldLabel', {
          defaultMessage: 'Enable field'
        }) : _i18n.i18n.translate('xpack.graph.fieldManager.disableFieldLabel', {
          defaultMessage: 'Disable field'
        }),
        icon: /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
          type: isDisabled ? 'eye' : 'eyeClosed',
          size: "m"
        }),
        onClick: toggleDisabledState,
        toolTipContent: isDisabled ? _i18n.i18n.translate('xpack.graph.fieldManager.enableFieldTooltipContent', {
          defaultMessage: 'Turn on discovery of vertices for this field. You can also Shift+click the field to enable it.'
        }) : _i18n.i18n.translate('xpack.graph.fieldManager.disableFieldTooltipContent', {
          defaultMessage: 'Turn off discovery of vertices for this field. You can also Shift+click the field to disable it.'
        })
      }, {
        name: _i18n.i18n.translate('xpack.graph.fieldManager.deleteFieldLabel', {
          defaultMessage: 'Deselect field'
        }),
        toolTipContent: _i18n.i18n.translate('xpack.graph.fieldManager.deleteFieldTooltipContent', {
          defaultMessage: 'No new vertices for this field will be discovered.  Existing vertices remain in the graph.'
        }),
        icon: /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
          type: "trash",
          size: "m"
        }),
        onClick: () => {
          deselectField(initialField.name);
          setOpen(false);
        }
      }]
    }, {
      id: 'settings',
      title: _i18n.i18n.translate('xpack.graph.fieldManager.settingsFormTitle', {
        defaultMessage: 'Edit'
      }),
      width: 380,
      initialFocusedItemIndex: -1,
      content: /*#__PURE__*/_react.default.createElement(_eui.EuiForm, {
        className: "gphFieldEditor__displayForm"
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
        display: "columnCompressed",
        label: _i18n.i18n.translate('xpack.graph.fieldManager.fieldLabel', {
          defaultMessage: 'Field'
        })
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiComboBox, {
        onChange: choices => {
          // when user hits backspace the selection gets cleared, so prevent it from breaking
          const newFieldName = choices.length ? choices[0].value : '';
          updateProp('name', newFieldName);
        },
        singleSelection: {
          asPlainText: true
        },
        isClearable: false,
        options: toOptions(allFields, initialField),
        selectedOptions: [{
          value: currentField.name,
          label: currentField.name,
          type: currentField.type
        }],
        renderOption: (option, searchValue, contentClassName) => {
          const {
            type,
            label
          } = option;
          return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
            className: contentClassName,
            gutterSize: "s",
            alignItems: "center"
          }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
            grow: null
          }, /*#__PURE__*/_react.default.createElement(_reactField.FieldIcon, {
            type: type,
            fill: "none"
          })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiHighlight, {
            search: searchValue
          }, label)));
        },
        compressed: true
      })), /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
        display: "columnCompressed",
        label: _i18n.i18n.translate('xpack.graph.fieldManager.colorLabel', {
          defaultMessage: 'Color'
        })
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiColorPicker, {
        color: color,
        onChange: newColor => {
          updateProp('color', newColor);
        },
        compressed: true
      })), /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
        display: "columnCompressed",
        label: _i18n.i18n.translate('xpack.graph.fieldManager.iconLabel', {
          defaultMessage: 'Icon'
        })
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiComboBox, {
        fullWidth: true,
        singleSelection: {
          asPlainText: true
        },
        isClearable: false,
        renderOption: (option, searchValue, contentClassName) => {
          const {
            label,
            value
          } = option;
          return /*#__PURE__*/_react.default.createElement("span", {
            className: contentClassName
          }, /*#__PURE__*/_react.default.createElement(_icon_renderer.IconRenderer, {
            icon: value
          }), ' ', /*#__PURE__*/_react.default.createElement(_eui.EuiHighlight, {
            search: searchValue
          }, label));
        },
        options: _style_choices.iconChoices.map(currentIcon => ({
          label: currentIcon.label,
          value: currentIcon
        })),
        selectedOptions: [{
          label: icon.label,
          value: icon
        }],
        onChange: choices => {
          updateProp('icon', choices[0].value);
        },
        compressed: true
      })), /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, {
        display: "columnCompressed",
        label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _i18n.i18n.translate('xpack.graph.fieldManager.maxTermsPerHopLabel', {
          defaultMessage: 'Terms per hop'
        }), ' ', /*#__PURE__*/_react.default.createElement(_eui.EuiIconTip, {
          content: _i18n.i18n.translate('xpack.graph.fieldManager.maxTermsPerHopDescription', {
            defaultMessage: 'Controls the maximum number of terms to return for each search step.'
          }),
          position: "right"
        }))
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiFieldNumber, {
        step: 1,
        min: 1,
        value: isDisabled ? lastValidHopSize : hopSize,
        onChange: ({
          target: {
            valueAsNumber
          }
        }) => {
          const updatedHopSize = Number.isNaN(valueAsNumber) ? 1 : valueAsNumber;
          updateProp(isDisabled ? 'lastValidHopSize' : 'hopSize', updatedHopSize);
        },
        compressed: true
      })), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
        size: "s"
      }), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
        direction: "row",
        justifyContent: "flexEnd"
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
        grow: false
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonEmpty, {
        size: "s",
        onClick: () => {
          setCurrentField(initialField);
          setOpen(false);
        }
      }, _i18n.i18n.translate('xpack.graph.fieldManager.cancelLabel', {
        defaultMessage: 'Cancel'
      }))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
        grow: false
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
        size: "s",
        fill: true,
        disabled: (0, _helpers.isEqual)(initialField, currentField) || currentField.name === '',
        onClick: updateField
      }, _i18n.i18n.translate('xpack.graph.fieldManager.updateLabel', {
        defaultMessage: 'Save changes'
      })))))
    }]
  }));
}
function toOptions(fields, currentField) {
  return fields.filter(field => !field.selected || field === currentField).map(({
    name,
    type
  }) => ({
    label: name,
    value: name,
    type: type
  }));
}