import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _sortBy from '../../node_modules/lodash-es/sortBy.js';
import _pick from '../../node_modules/lodash-es/pick.js';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.function.name.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import React__default, { useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import { ContentSwitcher, Switch, InlineNotification, InlineLoading, Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
import update from 'immutability-helper';
import { gray50, red50, green50, blue50, cyan50, magenta50, purple50, teal50, yellow50, orange50 } from '@carbon/colors';
import warning from 'warning';
import { ColorPropType, HotspotIconPropType } from '../../constants/SharedPropTypes.js';
import ImageHotspots from '../ImageCard/ImageHotspots.js';
import { settings } from '../../constants/Settings.js';
import { DashboardEditorActionsPropTypes, validThresholdColors, validHotspotIcons, defaultDashboardEditorActionsProps, validThresholdIcons } from '../DashboardEditor/editorUtils.js';
import useSizeObserver from '../../hooks/useSizeObserver.js';
import HotspotEditorTooltipTab from './HotspotEditorTooltipTab/HotspotEditorTooltipTab.js';
import HotspotTextStyleTab from './HotspotTextStyleTab/HotspotTextStyleTab.js';
import HotspotEditorDataSourceTab from './HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.js';
import { hotspotTypes, useHotspotEditorState } from './hooks/hotspotStateHook.js';
import DynamicHotspotSourcePicker from './DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.js';
import ComposedModal from '../ComposedModal/ComposedModal.js';

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(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.iotPrefix,
  prefix = settings.prefix;
var selectableColors = [{
  carbonColor: gray50,
  name: 'gray'
}, {
  carbonColor: red50,
  name: 'red'
}, {
  carbonColor: green50,
  name: 'green'
}, {
  carbonColor: blue50,
  name: 'blue'
}, {
  carbonColor: cyan50,
  name: 'cyan'
}, {
  carbonColor: magenta50,
  name: 'magenta'
}, {
  carbonColor: purple50,
  name: 'purple'
}, {
  carbonColor: teal50,
  name: 'teal'
}, {
  carbonColor: yellow50,
  name: 'yellow'
}, {
  carbonColor: 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.shape({}),
  /** Array of selectable color objects for text hotspot background */
  backgroundColors: PropTypes.arrayOf(ColorPropType),
  /** Array of selectable color objects for text hotspot border */
  borderColors: PropTypes.arrayOf(ColorPropType),
  cardConfig: PropTypes.shape({
    content: PropTypes.shape({
      alt: PropTypes.string,
      src: PropTypes.string,
      image: PropTypes.string,
      hideMinimap: PropTypes.bool,
      hideHotspots: PropTypes.bool,
      hideZoomControls: PropTypes.bool,
      id: PropTypes.string
    }),
    description: PropTypes.string,
    id: PropTypes.string,
    size: PropTypes.string,
    title: PropTypes.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.arrayOf(PropTypes.shape({
      dataSourceId: PropTypes.string,
      comparison: PropTypes.string,
      value: PropTypes.number,
      color: PropTypes.string,
      icon: PropTypes.string
    })),
    type: PropTypes.string,
    values: PropTypes.shape({
      hotspots: PropTypes.arrayOf(PropTypes.object)
    })
  }).isRequired,
  dataItems: PropTypes.arrayOf(PropTypes.shape({
    dataSourceId: PropTypes.string,
    label: PropTypes.string,
    unit: PropTypes.string,
    columnType: PropTypes.oneOf(['LITERAL', 'BOOLEAN', 'TIMESTAMP', 'NUMBER'])
  })),
  /** Default border width in px for new text hotspots */
  defaultBorderWidth: PropTypes.number,
  /** Default background fill opacity for new text hotspots */
  defaultBackgroundOpacity: PropTypes.number,
  /** Default font size in px for new text hotspots */
  defaultFontSize: PropTypes.number,
  defaultHotspotType: PropTypes.oneOf([hotspotTypes.FIXED, hotspotTypes.TEXT, hotspotTypes.DYNAMIC]),
  /** value for object-fit property - 'contain' or 'fill' */
  displayOption: PropTypes.string,
  /** Array of selectable color objects for text hotspot font */
  fontColors: PropTypes.arrayOf(ColorPropType),
  getValidDataItems: PropTypes.func,
  /** Array of selectable color objects for hotspot icon fill */
  hotspotIconFillColors: PropTypes.arrayOf(ColorPropType),
  /** Array of selectable icon objects for the hotspots adds to the default icons */
  hotspotIcons: PropTypes.arrayOf(HotspotIconPropType),
  imageId: PropTypes.string,
  imageZoomMax: PropTypes.number,
  /** Maximum Border Width */
  maxBorderWidth: PropTypes.number,
  /** Maximum Font size */
  maxFontSize: PropTypes.number,
  /** Maximum number of dynamic hotspots to load */
  maxHotspots: PropTypes.number,
  /** Maximum Opacity Value */
  maxOpacity: PropTypes.number,
  /** Minimum Opacity Value */
  minOpacity: PropTypes.number,
  /** Minimum Border Width */
  minBorderWidth: PropTypes.number,
  /** Callback for modal cancel button and close icon button */
  onClose: PropTypes.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.func,
  /** Callback for modal save button returns the entire updated card config */
  onSave: PropTypes.func.isRequired,
  /** Should the dialog be open or not */
  open: PropTypes.bool,
  /** the label of the hotspot modal */
  label: PropTypes.string,
  showTooManyHotspotsInfo: PropTypes.bool,
  i18n: PropTypes.shape({
    fixedTypeDataSourceTabLabelText: PropTypes.string,
    fixedTypeTooltipTabLabelText: PropTypes.string,
    hotspotsText: PropTypes.string,
    labelsText: PropTypes.string,
    loadingDynamicHotspotsText: PropTypes.string,
    modalHeaderTitleText: PropTypes.string,
    modalIconDescriptionText: PropTypes.string,
    cancelButtonLabelText: PropTypes.string,
    saveButtonLabelText: PropTypes.string,
    textStyleLabelText: PropTypes.string,
    textTypeDataSourceTabLabelText: PropTypes.string,
    tooManyHotspotsInfoText: PropTypes.string
  }),
  /** Callback i18n function for translating ListBoxMenuIcon SVG title in the MultiSelect component */
  translateWithId: PropTypes.func,
  testId: PropTypes.string,
  actions: DashboardEditorActionsPropTypes
};
var defaultProps = {
  availableDimensions: {},
  backgroundColors: selectableColors,
  borderColors: selectableColors,
  dataItems: [],
  defaultBackgroundOpacity: 100,
  defaultBorderWidth: 0,
  defaultFontSize: 12,
  defaultHotspotType: hotspotTypes.FIXED,
  displayOption: null,
  fontColors: selectableColors,
  getValidDataItems: undefined,
  hotspotIconFillColors: validThresholdColors,
  hotspotIcons: 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: defaultDashboardEditorActionsProps
};
var getSelectedHotspotsList = function getSelectedHotspotsList(selectedHotspot, hotspots) {
  return selectedHotspot ? selectedHotspot.type === hotspotTypes.DYNAMIC ? hotspots.filter(function (hotspot) {
    return hotspot.type === 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.useEffect(function () {
    {
      warning(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 = 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 = useHotspotEditorState({
      initialState: {
        hotspots: initialHotspots.filter(function (hotspot) {
          return hotspot.type !== 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.isValidElement(selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.content);
  var mergedI18n = useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var _useSizeObserver = useSizeObserver(),
    _useSizeObserver2 = _slicedToArray(_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 !== hotspotTypes.DYNAMIC;
    });
    var aDynamicHotspotDemo = hotspots.find(function (hotspot) {
      return hotspot.type === hotspotTypes.DYNAMIC;
    });
    if (aDynamicHotspotDemo) {
      filteredHotspots.push(_objectSpread(_objectSpread({}, aDynamicHotspotDemo), {}, {
        x: dynamicHotspotSourceX,
        y: dynamicHotspotSourceY
      }));
    }
    var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
      return update(hotspot, {
        $unset: ['id'],
        // Remove the internal id added for drag tracking
        content: {
          $unset: ['values']
        }
      });
    });
    var updatedCardConfig = update(cardConfig, {
      values: {
        hotspots: {
          $set: hotspotsWithoutExampleValues
        }
      }
    });
    onSaveCallback(updatedCardConfig);
  };
  var loadDemoHotspots = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(xSource, ySource) {
      var configToApply,
        demoHotspots,
        _args = arguments;
      return _regeneratorRuntime.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: 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);
    };
  }();
  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 === hotspotTypes.DYNAMIC;
    });
    if (dynamicHotspot) {
      var x = dynamicHotspot.x,
        y = dynamicHotspot.y,
        config = _objectWithoutProperties(dynamicHotspot, _excluded);
      updateDynamicHotspotSourceX(x);
      updateDynamicHotspotSourceY(y);
      loadDemoHotspots(x, y, config);
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [initialHotspots]);
  var imageHotspotsIcons = useMemo(function () {
    var correctFormatedThresholdIcons = validThresholdIcons.map(function (icon) {
      return {
        id: icon.name,
        icon: icon.carbonIcon.type,
        text: icon.name
      };
    });
    return [].concat(_toConsumableArray(hotspotIcons), _toConsumableArray(correctFormatedThresholdIcons));
  }, [hotspotIcons]);
  var hotspotDefaults = {
    borderWidth: defaultBorderWidth,
    backgroundOpacity: defaultBackgroundOpacity,
    fontSize: defaultFontSize
  };
  var renderDataSourceTab = function renderDataSourceTab() {
    return selectedHotspot ? /*#__PURE__*/React__default.createElement(HotspotEditorDataSourceTab, {
      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(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.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.createElement(InlineNotification, {
      kind: "info",
      title: tooManyHotspotsInfoText,
      "data-testid": "".concat(testId, "-too-many-hotspots-notification")
    }) : null, dynamicHotspotsLoading ? /*#__PURE__*/React__default.createElement(InlineLoading, {
      className: "".concat(iotPrefix, "--hotspot-editor-modal__dynamic-loading"),
      description: loadingDynamicHotspotsText,
      "data-testid": "".concat(testId, "-loading-hotspots")
    }) : /*#__PURE__*/React__default.createElement(Tabs, {
      selected: 0
    }, /*#__PURE__*/React__default.createElement(TabList, {
      "aria-label": testId
    }, /*#__PURE__*/React__default.createElement(Tab, null, fixedTypeTooltipTabLabelText), /*#__PURE__*/React__default.createElement(Tab, {
      disabled: hasNonEditableContent
    }, fixedTypeDataSourceTabLabelText)), /*#__PURE__*/React__default.createElement(TabPanels, null, /*#__PURE__*/React__default.createElement(TabPanel, null, /*#__PURE__*/React__default.createElement(HotspotEditorTooltipTab, {
      showDeleteButton: !((selectedHotspot === null || selectedHotspot === void 0 ? void 0 : selectedHotspot.type) === 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.createElement(TabPanel, null, hasNonEditableContent ? null : renderDataSourceTab()))));
  };
  var renderTextHotspotPage = function renderTextHotspotPage() {
    return /*#__PURE__*/React__default.createElement(Tabs, {
      selected: 0,
      "data-testid": "".concat(testId, "-hotspot-text-tabs")
    }, /*#__PURE__*/React__default.createElement(TabList, {
      "aria-label": "".concat(testId, "-hotspot-text-tabs")
    }, /*#__PURE__*/React__default.createElement(Tab, null, textStyleLabelText), /*#__PURE__*/React__default.createElement(Tab, {
      disabled: hasNonEditableContent
    }, textTypeDataSourceTabLabelText)), /*#__PURE__*/React__default.createElement(TabPanels, null, /*#__PURE__*/React__default.createElement(TabPanel, null, /*#__PURE__*/React__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.createElement(TabPanel, null, hasNonEditableContent ? null : renderDataSourceTab())));
  };
  return /*#__PURE__*/React__default.createElement(ComposedModal, {
    "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.createElement("div", {
    ref: modelContentRef
  }, modalContentSize.height && modalContentSize.width && /*#__PURE__*/React__default.createElement(ImageHotspots, {
    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.createElement("div", null, /*#__PURE__*/React__default.createElement(ContentSwitcher, {
    onChange: function onChange(e) {
      switchCurrentType(e.name === 'labels' ? hotspotTypes.TEXT : hotspotTypes.FIXED);
    },
    selectedIndex: currentType === hotspotTypes.TEXT ? 1 : 0,
    "data-testid": "".concat(testId, "-content-switcher")
  }, /*#__PURE__*/React__default.createElement(Switch, {
    key: "hotspots",
    name: "hotspots",
    text: hotspotsText,
    "data-testid": "".concat(testId, "-hotspots-switch")
  }), /*#__PURE__*/React__default.createElement(Switch, {
    key: "labels",
    name: "labels",
    text: labelsText,
    "data-testid": "".concat(testId, "-labels-switch")
  })), currentType === 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;

export { HotspotEditorModal$1 as default, selectableColors };
