'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var sortBy = require('../../node_modules/lodash-es/sortBy.js');
var pick = require('../../node_modules/lodash-es/pick.js');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.filter.js');
require('core-js/modules/es.array.find.js');
require('core-js/modules/es.array.iterator.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.function.name.js');
require('core-js/modules/es.object.get-own-property-descriptor.js');
require('core-js/modules/es.object.get-own-property-descriptors.js');
require('core-js/modules/es.object.keys.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/web.dom-collections.for-each.js');
require('core-js/modules/web.dom-collections.iterator.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var update = require('immutability-helper');
var colors = require('@carbon/colors');
var warning = require('warning');
var SharedPropTypes = require('../../constants/SharedPropTypes.js');
var ImageHotspots = require('../ImageCard/ImageHotspots.js');
var Settings = require('../../constants/Settings.js');
var editorUtils = require('../DashboardEditor/editorUtils.js');
var useSizeObserver = require('../../hooks/useSizeObserver.js');
var HotspotEditorTooltipTab = require('./HotspotEditorTooltipTab/HotspotEditorTooltipTab.js');
var HotspotTextStyleTab = require('./HotspotTextStyleTab/HotspotTextStyleTab.js');
var HotspotEditorDataSourceTab = require('./HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.js');
var hotspotStateHook = require('./hooks/hotspotStateHook.js');
var DynamicHotspotSourcePicker = require('./DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.js');
var ComposedModal = require('../ComposedModal/ComposedModal.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var update__default = /*#__PURE__*/_interopDefault(update);
var warning__default = /*#__PURE__*/_interopDefault(warning);

var _excluded = ["x", "y"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iotPrefix = Settings.settings.iotPrefix,
  prefix = Settings.settings.prefix;
var selectableColors = [{
  carbonColor: colors.gray50,
  name: 'gray'
}, {
  carbonColor: colors.red50,
  name: 'red'
}, {
  carbonColor: colors.green50,
  name: 'green'
}, {
  carbonColor: colors.blue50,
  name: 'blue'
}, {
  carbonColor: colors.cyan50,
  name: 'cyan'
}, {
  carbonColor: colors.magenta50,
  name: 'magenta'
}, {
  carbonColor: colors.purple50,
  name: 'purple'
}, {
  carbonColor: colors.teal50,
  name: 'teal'
}, {
  carbonColor: colors.yellow50,
  name: 'yellow'
}, {
  carbonColor: colors.orange50,
  name: 'orange'
}];
var propTypes = {
  /** an object where the keys are available dimensions and the values are the values available for those dimensions
   *  ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
   */
  availableDimensions: PropTypes__default.default.shape({}),
  /** Array of selectable color objects for text hotspot background */
  backgroundColors: PropTypes__default.default.arrayOf(SharedPropTypes.ColorPropType),
  /** Array of selectable color objects for text hotspot border */
  borderColors: PropTypes__default.default.arrayOf(SharedPropTypes.ColorPropType),
  cardConfig: PropTypes__default.default.shape({
    content: PropTypes__default.default.shape({
      alt: PropTypes__default.default.string,
      src: PropTypes__default.default.string,
      image: PropTypes__default.default.string,
      hideMinimap: PropTypes__default.default.bool,
      hideHotspots: PropTypes__default.default.bool,
      hideZoomControls: PropTypes__default.default.bool,
      id: PropTypes__default.default.string
    }),
    description: PropTypes__default.default.string,
    id: PropTypes__default.default.string,
    size: PropTypes__default.default.string,
    title: PropTypes__default.default.string,
    /**
     * If this prop is present the HotspotEditorModal will place new and existing thresholds here
     * instead of under each hotspot in cardConfig.values.hotspots.
     */
    thresholds: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
      dataSourceId: PropTypes__default.default.string,
      comparison: PropTypes__default.default.string,
      value: PropTypes__default.default.number,
      color: PropTypes__default.default.string,
      icon: PropTypes__default.default.string
    })),
    type: PropTypes__default.default.string,
    values: PropTypes__default.default.shape({
      hotspots: PropTypes__default.default.arrayOf(PropTypes__default.default.object)
    })
  }).isRequired,
  dataItems: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    dataSourceId: PropTypes__default.default.string,
    label: PropTypes__default.default.string,
    unit: PropTypes__default.default.string,
    columnType: PropTypes__default.default.oneOf(['LITERAL', 'BOOLEAN', 'TIMESTAMP', 'NUMBER'])
  })),
  /** Default border width in px for new text hotspots */
  defaultBorderWidth: PropTypes__default.default.number,
  /** Default background fill opacity for new text hotspots */
  defaultBackgroundOpacity: PropTypes__default.default.number,
  /** Default font size in px for new text hotspots */
  defaultFontSize: PropTypes__default.default.number,
  defaultHotspotType: PropTypes__default.default.oneOf([hotspotStateHook.hotspotTypes.FIXED, hotspotStateHook.hotspotTypes.TEXT, hotspotStateHook.hotspotTypes.DYNAMIC]),
  /** value for object-fit property - 'contain' or 'fill' */
  displayOption: PropTypes__default.default.string,
  /** Array of selectable color objects for text hotspot font */
  fontColors: PropTypes__default.default.arrayOf(SharedPropTypes.ColorPropType),
  getValidDataItems: PropTypes__default.default.func,
  /** Array of selectable color objects for hotspot icon fill */
  hotspotIconFillColors: PropTypes__default.default.arrayOf(SharedPropTypes.ColorPropType),
  /** Array of selectable icon objects for the hotspots adds to the default icons */
  hotspotIcons: PropTypes__default.default.arrayOf(SharedPropTypes.HotspotIconPropType),
  imageId: PropTypes__default.default.string,
  imageZoomMax: PropTypes__default.default.number,
  /** Maximum Border Width */
  maxBorderWidth: PropTypes__default.default.number,
  /** Maximum Font size */
  maxFontSize: PropTypes__default.default.number,
  /** Maximum number of dynamic hotspots to load */
  maxHotspots: PropTypes__default.default.number,
  /** Maximum Opacity Value */
  maxOpacity: PropTypes__default.default.number,
  /** Minimum Opacity Value */
  minOpacity: PropTypes__default.default.number,
  /** Minimum Border Width */
  minBorderWidth: PropTypes__default.default.number,
  /** Callback for modal cancel button and close icon button */
  onClose: PropTypes__default.default.func.isRequired,
  /**
   * Callback to fetch dynamic hotspots. Should returns a Promise that resolves to an array of demo hotspots
   * matching the x & y source.  Called with one param, an object with 3 values
   * {
   *  maxHotspots: maximum number to return,
   *  xSource: the name of the data item to use as the xSource,
   *  ySource: the name of the data item to use as the ySource
   * }.
   * */
  onFetchDynamicDemoHotspots: PropTypes__default.default.func,
  /** Callback for modal save button returns the entire updated card config */
  onSave: PropTypes__default.default.func.isRequired,
  /** Should the dialog be open or not */
  open: PropTypes__default.default.bool,
  /** the label of the hotspot modal */
  label: PropTypes__default.default.string,
  showTooManyHotspotsInfo: PropTypes__default.default.bool,
  i18n: PropTypes__default.default.shape({
    fixedTypeDataSourceTabLabelText: PropTypes__default.default.string,
    fixedTypeTooltipTabLabelText: PropTypes__default.default.string,
    hotspotsText: PropTypes__default.default.string,
    labelsText: PropTypes__default.default.string,
    loadingDynamicHotspotsText: PropTypes__default.default.string,
    modalHeaderTitleText: PropTypes__default.default.string,
    modalIconDescriptionText: PropTypes__default.default.string,
    cancelButtonLabelText: PropTypes__default.default.string,
    saveButtonLabelText: PropTypes__default.default.string,
    textStyleLabelText: PropTypes__default.default.string,
    textTypeDataSourceTabLabelText: PropTypes__default.default.string,
    tooManyHotspotsInfoText: PropTypes__default.default.string
  }),
  /** Callback i18n function for translating ListBoxMenuIcon SVG title in the MultiSelect component */
  translateWithId: PropTypes__default.default.func,
  testId: PropTypes__default.default.string,
  actions: editorUtils.DashboardEditorActionsPropTypes
};
var defaultProps = {
  availableDimensions: {},
  backgroundColors: selectableColors,
  borderColors: selectableColors,
  dataItems: [],
  defaultBackgroundOpacity: 100,
  defaultBorderWidth: 0,
  defaultFontSize: 12,
  defaultHotspotType: hotspotStateHook.hotspotTypes.FIXED,
  displayOption: null,
  fontColors: selectableColors,
  getValidDataItems: undefined,
  hotspotIconFillColors: editorUtils.validThresholdColors,
  hotspotIcons: editorUtils.validHotspotIcons,
  imageId: undefined,
  imageZoomMax: undefined,
  maxBorderWidth: 50,
  maxFontSize: 50,
  maxHotspots: 10,
  maxOpacity: 100,
  minBorderWidth: 0,
  minOpacity: 0,
  onFetchDynamicDemoHotspots: undefined,
  open: true,
  showTooManyHotspotsInfo: false,
  label: undefined,
  i18n: {
    fixedTypeDataSourceTabLabelText: 'Data source',
    fixedTypeTooltipTabLabelText: 'Tooltip',
    hotspotsText: 'Hotspots',
    labelsText: 'Labels',
    loadingDynamicHotspotsText: 'Locating hotspots',
    modalHeaderTitleText: 'Edit image',
    modalIconDescriptionText: 'Close',
    cancelButtonLabelText: 'Cancel',
    saveButtonLabelText: 'Save',
    textStyleLabelText: 'Text style',
    textTypeDataSourceTabLabelText: 'Data source',
    tooManyHotspotsInfoText: 'There are more hotspots than can be shown'
  },
  translateWithId: function translateWithId(idToTranslate) {
    switch (idToTranslate) {
      default:
        return '';
      case 'clear.all':
        return 'Clear all';
      case 'open.menu':
        return 'Open menu';
      case 'close.menu':
        return 'Close menu';
    }
  },
  testId: 'hotspot-editor-modal',
  actions: editorUtils.defaultDashboardEditorActionsProps
};
var getSelectedHotspotsList = function getSelectedHotspotsList(selectedHotspot, hotspots) {
  return selectedHotspot ? selectedHotspot.type === hotspotStateHook.hotspotTypes.DYNAMIC ? hotspots.filter(function (hotspot) {
    return hotspot.type === hotspotStateHook.hotspotTypes.DYNAMIC;
  }) : [selectedHotspot] : [];
};
var HotspotEditorModal = function HotspotEditorModal(_ref) {
  var _cardConfig$values;
  var availableDimensions = _ref.availableDimensions,
    backgroundColors = _ref.backgroundColors,
    borderColors = _ref.borderColors,
    cardConfig = _ref.cardConfig,
    dataItems = _ref.dataItems,
    defaultBorderWidth = _ref.defaultBorderWidth,
    defaultBackgroundOpacity = _ref.defaultBackgroundOpacity,
    defaultFontSize = _ref.defaultFontSize,
    defaultHotspotType = _ref.defaultHotspotType,
    displayOption = _ref.displayOption,
    fontColors = _ref.fontColors,
    getValidDataItems = _ref.getValidDataItems,
    hotspotIconFillColors = _ref.hotspotIconFillColors,
    hotspotIcons = _ref.hotspotIcons,
    imageId = _ref.imageId,
    imageZoomMax = _ref.imageZoomMax,
    label = _ref.label,
    maxBorderWidth = _ref.maxBorderWidth,
    maxFontSize = _ref.maxFontSize,
    maxHotspots = _ref.maxHotspots,
    maxOpacity = _ref.maxOpacity,
    minOpacity = _ref.minOpacity,
    minBorderWidth = _ref.minBorderWidth,
    onClose = _ref.onClose,
    onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
    onSaveCallback = _ref.onSave,
    open = _ref.open,
    showTooManyHotspotsInfo = _ref.showTooManyHotspotsInfo,
    i18n = _ref.i18n,
    translateWithId = _ref.translateWithId,
    testId = _ref.testId,
    actions = _ref.actions;
  React__default.default.useEffect(function () {
    {
      warning__default.default(false, 'The `HotspotEditorModal` is an experimental component and could be lacking unit test and documentation. Be aware that minor version bumps could introduce breaking changes. For the reasons listed above use of this component in production is highly discouraged') ;
    }
  }, []);
  var initialHotspots = ((_cardConfig$values = cardConfig.values) === null || _cardConfig$values === void 0 ? void 0 : _cardConfig$values.hotspots) || [];
  var myDataItems = React.useMemo(function () {
    return sortBy(getValidDataItems ? getValidDataItems(cardConfig) : dataItems, 'label');
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [getValidDataItems, dataItems] // watching the card config for changes will simply load this too many times
  );
  var _useHotspotEditorStat = hotspotStateHook.useHotspotEditorState({
      initialState: {
        hotspots: initialHotspots.filter(function (hotspot) {
          return hotspot.type !== hotspotStateHook.hotspotTypes.DYNAMIC;
        }),
        currentType: defaultHotspotType
      }
    }),
    currentType = _useHotspotEditorStat.currentType,
    hotspots = _useHotspotEditorStat.hotspots,
    selectedHotspot = _useHotspotEditorStat.selectedHotspot,
    dynamicHotspotsLoading = _useHotspotEditorStat.dynamicHotspotsLoading,
    dynamicHotspotSourceX = _useHotspotEditorStat.dynamicHotspotSourceX,
    dynamicHotspotSourceY = _useHotspotEditorStat.dynamicHotspotSourceY,
    addHotspot = _useHotspotEditorStat.addHotspot,
    clearDynamicHotspotsSource = _useHotspotEditorStat.clearDynamicHotspotsSource,
    deleteSelectedHotspot = _useHotspotEditorStat.deleteSelectedHotspot,
    setLoadingDynamicHotspots = _useHotspotEditorStat.setLoadingDynamicHotspots,
    setSelectedHotspot = _useHotspotEditorStat.setSelectedHotspot,
    setDynamicHotspots = _useHotspotEditorStat.setDynamicHotspots,
    switchCurrentType = _useHotspotEditorStat.switchCurrentType,
    updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
    updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
    updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
    updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
    updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
    updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
    updateDynamicHotspotSourceY = _useHotspotEditorStat.updateDynamicHotspotSourceY;
  var hasNonEditableContent = /*#__PURE__*/React__default.default.isValidElement(selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.content);
  var mergedI18n = React.useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var _useSizeObserver = useSizeObserver(),
    _useSizeObserver2 = _slicedToArray__default.default(_useSizeObserver, 2),
    modalContentSize = _useSizeObserver2[0],
    modelContentRef = _useSizeObserver2[1];
  var backgroundLabelText = mergedI18n.backgroundLabelText,
    boldLabelText = mergedI18n.boldLabelText,
    borderLabelText = mergedI18n.borderLabelText,
    borderWidthInvalidText = mergedI18n.borderWidthInvalidText,
    cancelButtonLabelText = mergedI18n.cancelButtonLabelText,
    colorDropdownLabelText = mergedI18n.colorDropdownLabelText,
    colorDropdownTitleText = mergedI18n.colorDropdownTitleText,
    deleteButtonLabelText = mergedI18n.deleteButtonLabelText,
    deleteButtonIconDescriptionText = mergedI18n.deleteButtonIconDescriptionText,
    descriptionTextareaLabelText = mergedI18n.descriptionTextareaLabelText,
    descriptionTextareaPlaceholderText = mergedI18n.descriptionTextareaPlaceholderText,
    fillOpacityLabelText = mergedI18n.fillOpacityLabelText,
    fillOpacityInvalidText = mergedI18n.fillOpacityInvalidText,
    fixedTypeDataSourceTabLabelText = mergedI18n.fixedTypeDataSourceTabLabelText,
    fixedTypeTooltipInfoText = mergedI18n.fixedTypeTooltipInfoText,
    fixedTypeTooltipTabLabelText = mergedI18n.fixedTypeTooltipTabLabelText,
    fontSizeInvalidText = mergedI18n.fontSizeInvalidText,
    hotspotsText = mergedI18n.hotspotsText,
    iconDropdownLabelText = mergedI18n.iconDropdownLabelText,
    iconDropdownTitleText = mergedI18n.iconDropdownTitleText,
    italicLabelText = mergedI18n.italicLabelText,
    labelsText = mergedI18n.labelsText,
    loadingDynamicHotspotsText = mergedI18n.loadingDynamicHotspotsText,
    modalHeaderTitleText = mergedI18n.modalHeaderTitleText,
    modalIconDescriptionText = mergedI18n.modalIconDescriptionText,
    saveButtonLabelText = mergedI18n.saveButtonLabelText,
    textStyleLabelText = mergedI18n.textStyleLabelText,
    textTypeStyleInfoText = mergedI18n.textTypeStyleInfoText,
    textTypeDataSourceTabLabelText = mergedI18n.textTypeDataSourceTabLabelText,
    titleInputLabelText = mergedI18n.titleInputLabelText,
    titleInputPlaceholderText = mergedI18n.titleInputPlaceholderText,
    tooManyHotspotsInfoText = mergedI18n.tooManyHotspotsInfoText,
    underlineLabelText = mergedI18n.underlineLabelText,
    fontColorLabelText = mergedI18n.fontColorLabelText,
    fontSizeLabelText = mergedI18n.fontSizeLabelText,
    borderWidthLabelText = mergedI18n.borderWidthLabelText,
    deleteButtonIconDescription = mergedI18n.deleteButtonIconDescription,
    selectAColor = mergedI18n.selectAColor;
  var onSave = function onSave() {
    var filteredHotspots = hotspots.filter(function (hotspot) {
      return hotspot.type !== hotspotStateHook.hotspotTypes.DYNAMIC;
    });
    var aDynamicHotspotDemo = hotspots.find(function (hotspot) {
      return hotspot.type === hotspotStateHook.hotspotTypes.DYNAMIC;
    });
    if (aDynamicHotspotDemo) {
      filteredHotspots.push(_objectSpread(_objectSpread({}, aDynamicHotspotDemo), {}, {
        x: dynamicHotspotSourceX,
        y: dynamicHotspotSourceY
      }));
    }
    var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
      return update__default.default(hotspot, {
        $unset: ['id'],
        // Remove the internal id added for drag tracking
        content: {
          $unset: ['values']
        }
      });
    });
    var updatedCardConfig = update__default.default(cardConfig, {
      values: {
        hotspots: {
          $set: hotspotsWithoutExampleValues
        }
      }
    });
    onSaveCallback(updatedCardConfig);
  };
  var loadDemoHotspots = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee(xSource, ySource) {
      var configToApply,
        demoHotspots,
        _args = arguments;
      return _regeneratorRuntime__default.default.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            configToApply = _args.length > 2 && _args[2] !== undefined ? _args[2] : {
              content: {}
            };
            if (!(xSource && ySource && onFetchDynamicDemoHotspots)) {
              _context.next = 10;
              break;
            }
            setLoadingDynamicHotspots(true);
            setDynamicHotspots([]);
            _context.next = 6;
            return onFetchDynamicDemoHotspots({
              maxHotspots: maxHotspots,
              xSource: xSource,
              ySource: ySource
            });
          case 6:
            demoHotspots = _context.sent;
            setDynamicHotspots(demoHotspots.map(function (_ref3) {
              var x = _ref3.x,
                y = _ref3.y;
              return _objectSpread(_objectSpread({
                x: x,
                y: y
              }, configToApply), {}, {
                type: hotspotStateHook.hotspotTypes.DYNAMIC
              });
            }));
            setSelectedHotspot(demoHotspots === null || demoHotspots === void 0 ? void 0 : demoHotspots[0]);
            setLoadingDynamicHotspots(false);
          case 10:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function loadDemoHotspots(_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }();
  React.useEffect(function () {
    // Fetch and configure initial dynamic demo hotspots if the initial
    // list of hotspots contain a dynamic hotspot to use as configuration.
    var dynamicHotspot = initialHotspots.find(function (hotspot) {
      return hotspot.type === hotspotStateHook.hotspotTypes.DYNAMIC;
    });
    if (dynamicHotspot) {
      var x = dynamicHotspot.x,
        y = dynamicHotspot.y,
        config = _objectWithoutProperties__default.default(dynamicHotspot, _excluded);
      updateDynamicHotspotSourceX(x);
      updateDynamicHotspotSourceY(y);
      loadDemoHotspots(x, y, config);
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [initialHotspots]);
  var imageHotspotsIcons = React.useMemo(function () {
    var correctFormatedThresholdIcons = editorUtils.validThresholdIcons.map(function (icon) {
      return {
        id: icon.name,
        icon: icon.carbonIcon.type,
        text: icon.name
      };
    });
    return [].concat(_toConsumableArray__default.default(hotspotIcons), _toConsumableArray__default.default(correctFormatedThresholdIcons));
  }, [hotspotIcons]);
  var hotspotDefaults = {
    borderWidth: defaultBorderWidth,
    backgroundOpacity: defaultBackgroundOpacity,
    fontSize: defaultFontSize
  };
  var renderDataSourceTab = function renderDataSourceTab() {
    return selectedHotspot ? /*#__PURE__*/React__default.default.createElement(HotspotEditorDataSourceTab.default, {
      availableDimensions: availableDimensions,
      key: "".concat(selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.x).concat(selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.y) // Regenerate when hotspot change
      ,
      hotspot: selectedHotspot,
      cardConfig: update__default.default(cardConfig, {
        content: {
          hotspots: {
            $set: [selectedHotspot]
          }
        }
      }),
      i18n: mergedI18n,
      translateWithId: translateWithId,
      dataItems: myDataItems,
      onChange: updateHotspotDataSource,
      testId: "".concat(testId, "-data-source-tab"),
      actions: actions
    }) : null;
  };
  var renderHotspotsPage = function renderHotspotsPage() {
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(DynamicHotspotSourcePicker, {
      i18n: mergedI18n,
      dataSourceItems: myDataItems.filter(function (dataItem) {
        return dataItem.columnType === 'NUMBER';
      }),
      onXValueChange: function onXValueChange(newXSource) {
        updateDynamicHotspotSourceX(newXSource);
        loadDemoHotspots(newXSource, dynamicHotspotSourceY);
      },
      onYValueChange: function onYValueChange(newYSource) {
        updateDynamicHotspotSourceY(newYSource);
        loadDemoHotspots(newYSource, dynamicHotspotSourceX);
      },
      selectedSourceIdX: dynamicHotspotSourceX,
      selectedSourceIdY: dynamicHotspotSourceY,
      onClear: clearDynamicHotspotsSource,
      translateWithId: translateWithId
    }), showTooManyHotspotsInfo ? /*#__PURE__*/React__default.default.createElement(react.InlineNotification, {
      kind: "info",
      title: tooManyHotspotsInfoText,
      "data-testid": "".concat(testId, "-too-many-hotspots-notification")
    }) : null, dynamicHotspotsLoading ? /*#__PURE__*/React__default.default.createElement(react.InlineLoading, {
      className: "".concat(iotPrefix, "--hotspot-editor-modal__dynamic-loading"),
      description: loadingDynamicHotspotsText,
      "data-testid": "".concat(testId, "-loading-hotspots")
    }) : /*#__PURE__*/React__default.default.createElement(react.Tabs, {
      selected: 0
    }, /*#__PURE__*/React__default.default.createElement(react.TabList, {
      "aria-label": testId
    }, /*#__PURE__*/React__default.default.createElement(react.Tab, null, fixedTypeTooltipTabLabelText), /*#__PURE__*/React__default.default.createElement(react.Tab, {
      disabled: hasNonEditableContent
    }, fixedTypeDataSourceTabLabelText)), /*#__PURE__*/React__default.default.createElement(react.TabPanels, null, /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, /*#__PURE__*/React__default.default.createElement(HotspotEditorTooltipTab, {
      showDeleteButton: !((selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.type) === hotspotStateHook.hotspotTypes.DYNAMIC),
      showInfoMessage: !selectedHotspot,
      hotspotIcons: imageHotspotsIcons,
      hotspotIconFillColors: hotspotIconFillColors,
      formValues: selectedHotspot,
      onChange: updateHotspotTooltip,
      onDelete: deleteSelectedHotspot,
      i18n: {
        deleteButtonLabelText: deleteButtonLabelText,
        deleteButtonIconDescriptionText: deleteButtonIconDescriptionText,
        titleInputLabelText: titleInputLabelText,
        titleInputPlaceholderText: titleInputPlaceholderText,
        descriptionTextareaLabelText: descriptionTextareaLabelText,
        descriptionTextareaPlaceholderText: descriptionTextareaPlaceholderText,
        iconDropdownLabelText: iconDropdownLabelText,
        iconDropdownTitleText: iconDropdownTitleText,
        colorDropdownLabelText: colorDropdownLabelText,
        colorDropdownTitleText: colorDropdownTitleText,
        infoMessageText: fixedTypeTooltipInfoText
      },
      translateWithId: translateWithId,
      testId: "".concat(testId, "-tooltip-tab")
    })), /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, hasNonEditableContent ? null : renderDataSourceTab()))));
  };
  var renderTextHotspotPage = function renderTextHotspotPage() {
    return /*#__PURE__*/React__default.default.createElement(react.Tabs, {
      selected: 0,
      "data-testid": "".concat(testId, "-hotspot-text-tabs")
    }, /*#__PURE__*/React__default.default.createElement(react.TabList, {
      "aria-label": "".concat(testId, "-hotspot-text-tabs")
    }, /*#__PURE__*/React__default.default.createElement(react.Tab, null, textStyleLabelText), /*#__PURE__*/React__default.default.createElement(react.Tab, {
      disabled: hasNonEditableContent
    }, textTypeDataSourceTabLabelText)), /*#__PURE__*/React__default.default.createElement(react.TabPanels, null, /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, /*#__PURE__*/React__default.default.createElement(HotspotTextStyleTab, {
      maxBorderWidth: maxBorderWidth,
      maxFontSize: maxFontSize,
      maxOpacity: maxOpacity,
      minOpacity: minOpacity,
      minBorderWidth: minBorderWidth,
      fontColors: fontColors,
      backgroundColors: backgroundColors,
      borderColors: borderColors,
      formValues: selectedHotspot,
      onChange: updateTextHotspotStyle,
      onDelete: deleteSelectedHotspot,
      showInfoMessage: !selectedHotspot,
      i18n: {
        boldLabelText: boldLabelText,
        infoMessageText: textTypeStyleInfoText,
        italicLabelText: italicLabelText,
        underlineLabelText: underlineLabelText,
        fontColorLabelText: fontColorLabelText,
        fontSizeLabelText: fontSizeLabelText,
        fontSizeInvalidText: fontSizeInvalidText,
        backgroundLabelText: backgroundLabelText,
        fillOpacityLabelText: fillOpacityLabelText,
        fillOpacityInvalidText: fillOpacityInvalidText,
        borderLabelText: borderLabelText,
        borderWidthLabelText: borderWidthLabelText,
        borderWidthInvalidText: borderWidthInvalidText,
        deleteButtonLabelText: deleteButtonLabelText,
        deleteButtonIconDescription: deleteButtonIconDescription,
        selectAColor: selectAColor
      },
      translateWithId: translateWithId
    })), /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, hasNonEditableContent ? null : renderDataSourceTab())));
  };
  return /*#__PURE__*/React__default.default.createElement(ComposedModal.default, {
    "data-testid": "".concat(testId, "--hotspot-editor-modal"),
    selectorPrimaryFocus: ".".concat(prefix, "--modal-header"),
    className: "".concat(iotPrefix, "--hotspot-editor-modal"),
    header: {
      label: label,
      title: modalHeaderTitleText
    },
    iconDescription: modalIconDescriptionText,
    isFullScreen: true,
    onClose: onClose,
    onSubmit: onSave,
    open: open,
    passiveModal: false,
    footer: {
      primaryButtonLabel: saveButtonLabelText,
      secondaryButtonLabel: cancelButtonLabelText,
      isPrimaryButtonDisabled: dynamicHotspotsLoading
    }
  }, /*#__PURE__*/React__default.default.createElement("div", {
    ref: modelContentRef
  }, modalContentSize.height && modalContentSize.width && /*#__PURE__*/React__default.default.createElement(ImageHotspots.default, {
    onHotspotContentChanged: updateTextHotspotContent,
    height: modalContentSize.height,
    hotspots: hotspots,
    icons: imageHotspotsIcons,
    imageZoomMax: imageZoomMax,
    isEditable: true,
    i18n: pick(mergedI18n, 'zoomIn', 'zoomOut', 'zoomToFit', 'titlePlaceholderText', 'titleEditableHintText'),
    isHotspotDataLoading: dynamicHotspotsLoading,
    onAddHotspotPosition: function onAddHotspotPosition(position) {
      addHotspot({
        position: position,
        hotspotDefaults: hotspotDefaults
      });
    },
    onUpdateHotspotPosition: updateHotspotPosition,
    onSelectHotspot: setSelectedHotspot,
    selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
    src: cardConfig.content.src,
    id: imageId,
    width: modalContentSize.width,
    displayOption: displayOption
  })), /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(react.ContentSwitcher, {
    onChange: function onChange(e) {
      switchCurrentType(e.name === 'labels' ? hotspotStateHook.hotspotTypes.TEXT : hotspotStateHook.hotspotTypes.FIXED);
    },
    selectedIndex: currentType === hotspotStateHook.hotspotTypes.TEXT ? 1 : 0,
    "data-testid": "".concat(testId, "-content-switcher")
  }, /*#__PURE__*/React__default.default.createElement(react.Switch, {
    key: "hotspots",
    name: "hotspots",
    text: hotspotsText,
    "data-testid": "".concat(testId, "-hotspots-switch")
  }), /*#__PURE__*/React__default.default.createElement(react.Switch, {
    key: "labels",
    name: "labels",
    text: labelsText,
    "data-testid": "".concat(testId, "-labels-switch")
  })), currentType === hotspotStateHook.hotspotTypes.TEXT ? renderTextHotspotPage() : renderHotspotsPage()));
};
HotspotEditorModal.propTypes = propTypes;
HotspotEditorModal.defaultProps = defaultProps;
HotspotEditorModal.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "HotspotEditorModal",
  "props": {
    "availableDimensions": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "an object where the keys are available dimensions and the values are the values available for those dimensions\n ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }",
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false
    },
    "backgroundColors": {
      "defaultValue": {
        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
        "computed": false
      },
      "description": "Array of selectable color objects for text hotspot background",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "ColorPropType"
        }
      },
      "required": false
    },
    "borderColors": {
      "defaultValue": {
        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
        "computed": false
      },
      "description": "Array of selectable color objects for text hotspot border",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "ColorPropType"
        }
      },
      "required": false
    },
    "dataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "dataSourceId": {
              "name": "string",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            },
            "unit": {
              "name": "string",
              "required": false
            },
            "columnType": {
              "name": "enum",
              "value": [{
                "value": "'LITERAL'",
                "computed": false
              }, {
                "value": "'BOOLEAN'",
                "computed": false
              }, {
                "value": "'TIMESTAMP'",
                "computed": false
              }, {
                "value": "'NUMBER'",
                "computed": false
              }],
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "defaultBackgroundOpacity": {
      "defaultValue": {
        "value": "100",
        "computed": false
      },
      "description": "Default background fill opacity for new text hotspots",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "defaultBorderWidth": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "description": "Default border width in px for new text hotspots",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "defaultFontSize": {
      "defaultValue": {
        "value": "12",
        "computed": false
      },
      "description": "Default font size in px for new text hotspots",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "defaultHotspotType": {
      "defaultValue": {
        "value": "hotspotTypes.FIXED",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "hotspotTypes.FIXED",
          "computed": true
        }, {
          "value": "hotspotTypes.TEXT",
          "computed": true
        }, {
          "value": "hotspotTypes.DYNAMIC",
          "computed": true
        }]
      },
      "required": false
    },
    "displayOption": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "value for object-fit property - 'contain' or 'fill'",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "fontColors": {
      "defaultValue": {
        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
        "computed": false
      },
      "description": "Array of selectable color objects for text hotspot font",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "ColorPropType"
        }
      },
      "required": false
    },
    "getValidDataItems": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "hotspotIconFillColors": {
      "defaultValue": {
        "value": "validThresholdColors",
        "computed": true
      },
      "description": "Array of selectable color objects for hotspot icon fill",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "ColorPropType"
        }
      },
      "required": false
    },
    "hotspotIcons": {
      "defaultValue": {
        "value": "validHotspotIcons",
        "computed": true
      },
      "description": "Array of selectable icon objects for the hotspots adds to the default icons",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "HotspotIconPropType"
        }
      },
      "required": false
    },
    "imageId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "imageZoomMax": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxBorderWidth": {
      "defaultValue": {
        "value": "50",
        "computed": false
      },
      "description": "Maximum Border Width",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxFontSize": {
      "defaultValue": {
        "value": "50",
        "computed": false
      },
      "description": "Maximum Font size",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxHotspots": {
      "defaultValue": {
        "value": "10",
        "computed": false
      },
      "description": "Maximum number of dynamic hotspots to load",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxOpacity": {
      "defaultValue": {
        "value": "100",
        "computed": false
      },
      "description": "Maximum Opacity Value",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "minBorderWidth": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "description": "Minimum Border Width",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "minOpacity": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "description": "Minimum Opacity Value",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "onFetchDynamicDemoHotspots": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Callback to fetch dynamic hotspots. Should returns a Promise that resolves to an array of demo hotspots\nmatching the x & y source.  Called with one param, an object with 3 values\n{\n maxHotspots: maximum number to return,\n xSource: the name of the data item to use as the xSource,\n ySource: the name of the data item to use as the ySource\n}.",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "open": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "Should the dialog be open or not",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "showTooManyHotspotsInfo": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "label": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "the label of the hotspot modal",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  fixedTypeDataSourceTabLabelText: 'Data source',\n  fixedTypeTooltipTabLabelText: 'Tooltip',\n  hotspotsText: 'Hotspots',\n  labelsText: 'Labels',\n  loadingDynamicHotspotsText: 'Locating hotspots',\n  modalHeaderTitleText: 'Edit image',\n  modalIconDescriptionText: 'Close',\n  cancelButtonLabelText: 'Cancel',\n  saveButtonLabelText: 'Save',\n  textStyleLabelText: 'Text style',\n  textTypeDataSourceTabLabelText: 'Data source',\n  tooManyHotspotsInfoText: 'There are more hotspots than can be shown',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "fixedTypeDataSourceTabLabelText": {
            "name": "string",
            "required": false
          },
          "fixedTypeTooltipTabLabelText": {
            "name": "string",
            "required": false
          },
          "hotspotsText": {
            "name": "string",
            "required": false
          },
          "labelsText": {
            "name": "string",
            "required": false
          },
          "loadingDynamicHotspotsText": {
            "name": "string",
            "required": false
          },
          "modalHeaderTitleText": {
            "name": "string",
            "required": false
          },
          "modalIconDescriptionText": {
            "name": "string",
            "required": false
          },
          "cancelButtonLabelText": {
            "name": "string",
            "required": false
          },
          "saveButtonLabelText": {
            "name": "string",
            "required": false
          },
          "textStyleLabelText": {
            "name": "string",
            "required": false
          },
          "textTypeDataSourceTabLabelText": {
            "name": "string",
            "required": false
          },
          "tooManyHotspotsInfoText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "translateWithId": {
      "defaultValue": {
        "value": "(idToTranslate) => {\n  switch (idToTranslate) {\n    default:\n      return '';\n    case 'clear.all':\n      return 'Clear all';\n    case 'open.menu':\n      return 'Open menu';\n    case 'close.menu':\n      return 'Close menu';\n  }\n}",
        "computed": false
      },
      "description": "Callback i18n function for translating ListBoxMenuIcon SVG title in the MultiSelect component",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'hotspot-editor-modal'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "actions": {
      "defaultValue": {
        "value": "defaultDashboardEditorActionsProps",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DashboardEditorActionsPropTypes"
      },
      "required": false
    },
    "cardConfig": {
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "content": {
            "name": "shape",
            "value": {
              "alt": {
                "name": "string",
                "required": false
              },
              "src": {
                "name": "string",
                "required": false
              },
              "image": {
                "name": "string",
                "required": false
              },
              "hideMinimap": {
                "name": "bool",
                "required": false
              },
              "hideHotspots": {
                "name": "bool",
                "required": false
              },
              "hideZoomControls": {
                "name": "bool",
                "required": false
              },
              "id": {
                "name": "string",
                "required": false
              }
            },
            "required": false
          },
          "description": {
            "name": "string",
            "required": false
          },
          "id": {
            "name": "string",
            "required": false
          },
          "size": {
            "name": "string",
            "required": false
          },
          "title": {
            "name": "string",
            "required": false
          },
          "thresholds": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "dataSourceId": {
                  "name": "string",
                  "required": false
                },
                "comparison": {
                  "name": "string",
                  "required": false
                },
                "value": {
                  "name": "number",
                  "required": false
                },
                "color": {
                  "name": "string",
                  "required": false
                },
                "icon": {
                  "name": "string",
                  "required": false
                }
              }
            },
            "description": "If this prop is present the HotspotEditorModal will place new and existing thresholds here\ninstead of under each hotspot in cardConfig.values.hotspots.",
            "required": false
          },
          "type": {
            "name": "string",
            "required": false
          },
          "values": {
            "name": "shape",
            "value": {
              "hotspots": {
                "name": "arrayOf",
                "value": {
                  "name": "object"
                },
                "required": false
              }
            },
            "required": false
          }
        }
      },
      "required": true
    },
    "onClose": {
      "description": "Callback for modal cancel button and close icon button",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onSave": {
      "description": "Callback for modal save button returns the entire updated card config",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var HotspotEditorModal$1 = HotspotEditorModal;

exports.default = HotspotEditorModal$1;
exports.selectableColors = selectableColors;
