import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _omit from '../../../../node_modules/lodash-es/omit.js';
import isEmpty from '../../../../node_modules/lodash-es/isEmpty.js';
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.find-index.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.array.slice.js';
import 'core-js/modules/es.array.sort.js';
import 'core-js/modules/es.number.constructor.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/es.regexp.to-string.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import React__default, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { red60, purple70, cyan50, teal70, magenta70, red50, red90, green60, blue80, magenta50, purple50, teal50, cyan90 } from '@carbon/colors';
import { Dropdown, FormLabel, TextInput } from '@carbon/react';
import { settings } from '../../../../constants/Settings.js';
import { DataItemsPropTypes, DashboardEditorActionsPropTypes, defaultDashboardEditorActionsProps, handleDefaultDataItemEdit } from '../../../DashboardEditor/editorUtils.js';
import ColorDropdown from '../../../ColorDropdown/ColorDropdown.js';
import { CARD_TYPES } from '../../../../constants/LayoutConstants.js';
import { isTimeBasedCard, getTranslatedLabel } from '../../../../utils/cardUtilityFunctions.js';
import ThresholdsFormItem from './ThresholdsFormItem.js';
import ComposedModal from '../../../ComposedModal/ComposedModal.js';
import { WarningAlt } from '@carbon/icons-react';

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 propTypes = {
  /* card value */
  cardConfig: PropTypes.shape({
    id: PropTypes.string,
    title: PropTypes.string,
    size: PropTypes.string,
    type: PropTypes.string,
    content: PropTypes.shape({
      series: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string,
        dataSourceId: PropTypes.string,
        color: PropTypes.string
      })),
      columns: PropTypes.arrayOf(PropTypes.shape({
        dataSourceId: PropTypes.string,
        label: PropTypes.string,
        type: PropTypes.string,
        dataItemType: PropTypes.string
      })),
      type: PropTypes.string,
      xLabel: PropTypes.string,
      yLabel: PropTypes.string,
      unit: PropTypes.string,
      includeZeroOnXaxis: PropTypes.bool,
      includeZeroOnYaxis: PropTypes.bool,
      timeDataSourceId: PropTypes.string
    }),
    interval: PropTypes.string,
    showLegend: PropTypes.bool
  }),
  showEditor: PropTypes.bool,
  setShowEditor: PropTypes.func,
  editDataItem: PropTypes.shape({
    columnType: PropTypes.oneOf(['LITERAL', 'BOOLEAN', 'TIMESTAMP', 'NUMBER']),
    dataSourceId: PropTypes.string,
    dataFilter: PropTypes.objectOf(PropTypes.string),
    /** Maps to data item columnType */
    type: PropTypes.string,
    /** Maps to data item type */
    dataItemType: PropTypes.string,
    aggregationMethods: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.string,
      text: PropTypes.string
    })),
    aggregationMethod: PropTypes.string,
    grain: PropTypes.string,
    label: PropTypes.string,
    dataItemId: PropTypes.string,
    color: PropTypes.string,
    unit: PropTypes.string,
    precision: PropTypes.number,
    thresholds: PropTypes.arrayOf(PropTypes.shape({
      color: PropTypes.string,
      comparison: PropTypes.stirng,
      icon: PropTypes.string,
      value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string])
    })),
    tooltip: PropTypes.string
  }),
  setEditDataItem: PropTypes.func,
  /** 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({}),
  onChange: PropTypes.func.isRequired,
  editDataSeries: PropTypes.arrayOf(PropTypes.shape({
    dataSourceId: PropTypes.string,
    label: PropTypes.string,
    color: PropTypes.string
  })),
  validDataItems: DataItemsPropTypes,
  isSummaryDashboard: PropTypes.bool,
  isLarge: PropTypes.bool,
  i18n: PropTypes.shape({
    dataItemEditorDataItemTitle: PropTypes.string,
    dataItemEditorDataItemLabel: PropTypes.string,
    dataItemEditorLegendColor: PropTypes.string,
    dataItemEditorSectionTitle: PropTypes.string,
    selectDataItems: PropTypes.string,
    dataItem: PropTypes.string,
    edit: PropTypes.string,
    dataItemEditorDataItemCustomLabel: PropTypes.string,
    /** Function receiving the dataItemSource & dataItemId as params:
     * (dataItemSource, dataItemId) => `${dataItemSource}: ${dataItemId}` */
    dataItemEditorDataItemHelperText: PropTypes.func,
    dataItemEditorDataItemUnit: PropTypes.string,
    dataItemEditorDataItemFilter: PropTypes.string,
    dataItemEditorDataItemThresholds: PropTypes.string,
    dataItemEditorDataItemAddThreshold: PropTypes.string,
    source: PropTypes.string,
    primaryButtonLabelText: PropTypes.string,
    secondaryButtonLabelText: PropTypes.string
  }),
  /** whether to use translated labels in cards */
  shouldUseTranslatedLabels: PropTypes.bool,
  actions: DashboardEditorActionsPropTypes,
  /**
   * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
   */
  handleDataItemEdit: PropTypes.func,
  options: PropTypes.shape({
    hasColorDropdown: PropTypes.bool,
    hasUnit: PropTypes.bool,
    hasDecimalPlacesDropdown: PropTypes.bool,
    hasThresholds: PropTypes.bool,
    hasTooltip: PropTypes.bool
  })
};
var defaultProps = {
  cardConfig: {},
  i18n: {
    dataItemEditorDataSeriesTitle: 'Customize data series',
    dataItemEditorValueCardTitle: 'Edit data',
    dataItemEditorDataItemLabel: 'Label',
    dataItemEditorLegendColor: 'Legend color',
    dataItemEditorSectionTitle: 'Data series',
    selectDataItems: 'Select data items',
    dataItem: 'Data item',
    edit: 'Edit',
    example: 'Example',
    notSet: 'Not set',
    none: 'None',
    dataItemEditorDataItemCustomLabel: 'Custom label',
    dataItemEditorDataItemHelperText: function dataItemEditorDataItemHelperText(dataItemSource, dataItemId) {
      return "".concat(dataItemSource, ": ").concat(dataItemId);
    },
    dataItemEditorDataItemUnit: 'Unit',
    dataItemEditorDataItemFilter: 'Data filter',
    dataItemEditorDataItemThresholds: 'Thresholds',
    dataItemEditorDataItemAddThreshold: 'Add threshold',
    dataItemEditorDataItemTooltip: 'Tooltip',
    dataItemEditorBarColor: 'Bar color',
    dataItemEditorLineColor: 'Line color',
    dataItemEditorAddAggregationMethodLabel: 'Add aggregation method',
    dataItemEditorAddAggregationMethodDescription: 'Add aggregation method',
    source: 'Source data item',
    aggregationMethod: 'Aggregation method',
    grain: 'Grain',
    hourlyLabel: 'Hourly',
    dailyLabel: 'Daily',
    weeklyLabel: 'Weekly',
    monthlyLabel: 'Monthly',
    yearlyLabel: 'Yearly',
    dataItemSource: 'Data item source',
    primaryButtonLabelText: 'Save',
    secondaryButtonLabelText: 'Cancel',
    decimalPlacesLabel: 'Decimal places'
  },
  shouldUseTranslatedLabels: false,
  editDataSeries: [],
  showEditor: false,
  setShowEditor: null,
  availableDimensions: {},
  editDataItem: {
    columnType: undefined
  },
  setEditDataItem: null,
  isSummaryDashboard: false,
  isLarge: false,
  validDataItems: [],
  actions: defaultDashboardEditorActionsProps,
  handleDataItemEdit: handleDefaultDataItemEdit,
  options: {
    hasColorDropdown: false,
    hasUnit: false,
    hasDecimalPlacesDropdown: false,
    hasThresholds: false,
    hasTooltip: false
  }
};
var DATAITEM_COLORS_OPTIONS = [{
  carbonColor: purple70,
  name: 'purple70'
}, {
  carbonColor: cyan50,
  name: 'cyan50'
}, {
  carbonColor: teal70,
  name: 'teal70'
}, {
  carbonColor: magenta70,
  name: 'magenta70'
}, {
  carbonColor: red50,
  name: 'red50'
}, {
  carbonColor: red90,
  name: 'red90'
}, {
  carbonColor: green60,
  name: 'green60'
}, {
  carbonColor: blue80,
  name: 'blue80'
}, {
  carbonColor: magenta50,
  name: 'magenta50'
}, {
  carbonColor: purple50,
  name: 'purple50'
}, {
  carbonColor: teal50,
  name: 'teal50'
}, {
  carbonColor: cyan90,
  name: 'cyan90'
}];
var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
  var cardConfig = _ref.cardConfig,
    isSummaryDashboard = _ref.isSummaryDashboard,
    showEditor = _ref.showEditor,
    editDataSeries = _ref.editDataSeries,
    setShowEditor = _ref.setShowEditor,
    editDataItem = _ref.editDataItem,
    setEditDataItem = _ref.setEditDataItem,
    validDataItems = _ref.validDataItems,
    availableDimensions = _ref.availableDimensions,
    onChange = _ref.onChange,
    i18n = _ref.i18n,
    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
    isLarge = _ref.isLarge,
    _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
    hasAggregationsDropDown = _ref$actions$dataSeri.hasAggregationsDropDown,
    hasGrainsDropDown = _ref$actions$dataSeri.hasGrainsDropDown,
    hasDataFilterDropdown = _ref$actions$dataSeri.hasDataFilterDropdown,
    handleDataItemEdit = _ref.handleDataItemEdit,
    options = _ref.options;
  var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  var id = cardConfig.id,
    type = cardConfig.type;
  var baseClassName = "".concat(iotPrefix, "--card-edit-form");
  var hasColorDropdown = options.hasColorDropdown,
    hasUnit = options.hasUnit,
    hasDecimalPlacesDropdown = options.hasDecimalPlacesDropdown,
    hasThresholds = options.hasThresholds,
    hasTooltip = options.hasTooltip;
  var isTimeBasedCard$1 = isTimeBasedCard(cardConfig);
  var handleTranslation = useCallback(function (idToTranslate) {
    var clearSelectionText = mergedI18n.clearSelectionText,
      openMenuText = mergedI18n.openMenuText,
      closeMenuText = mergedI18n.closeMenuText,
      clearAllText = mergedI18n.clearAllText,
      incrementNumberText = mergedI18n.incrementNumberText,
      decrementNumberText = mergedI18n.decrementNumberText;
    switch (idToTranslate) {
      case 'clear.all':
        return clearAllText || 'Clear all';
      case 'clear.selection':
        return clearSelectionText || 'Clear selection';
      case 'open.menu':
        return openMenuText || 'Open menu';
      case 'close.menu':
        return closeMenuText || 'Close menu';
      case 'increment.number':
        return incrementNumberText || 'Increment number';
      case 'decrement.number':
        return decrementNumberText || 'Decrement number';
      default:
        return '';
    }
  }, [mergedI18n]);
  var availableGrains = [{
    id: 'hourly',
    text: mergedI18n.hourlyLabel
  }, {
    id: 'daily',
    text: mergedI18n.dailyLabel
  }, {
    id: 'weekly',
    text: mergedI18n.weeklyLabel
  }, {
    id: 'monthly',
    text: mergedI18n.monthlyLabel
  }, {
    id: 'yearly',
    text: mergedI18n.yearlyLabel
  }];
  var matchedDataItem = validDataItems === null || validDataItems === void 0 ? void 0 : validDataItems.find(function (_ref2) {
    var dataSourceId = _ref2.dataSourceId;
    return dataSourceId === editDataItem.dataSourceId;
  });
  var initialAggregation = matchedDataItem === null || matchedDataItem === void 0 ? void 0 : matchedDataItem.aggregationMethod;
  var initialGrain = matchedDataItem === null || matchedDataItem === void 0 ? void 0 : matchedDataItem.grain;
  var selectedDimensionFilter = useMemo(function () {
    return editDataItem.dataFilter ? Object.keys(editDataItem.dataFilter)[0] : '';
  }, [editDataItem.dataFilter]);
  var availableDimensionsItems = useMemo(function () {
    var _availableDimensions$;
    return selectedDimensionFilter && ((_availableDimensions$ = availableDimensions[selectedDimensionFilter]) === null || _availableDimensions$ === void 0 ? void 0 : _availableDimensions$.sort().map(function (item) {
      return {
        id: item,
        text: item.toString()
      };
    })) || [];
  }, [availableDimensions, selectedDimensionFilter]);
  var DataEditorContent = useMemo(function () {
    var _editDataItem$aggrega, _editDataItem$aggrega2, _editDataItem$precisi;
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hasAggregationsDropDown && hasAggregationsDropDown(editDataItem) && /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group")
    }, !initialAggregation || !isSummaryDashboard ?
    /*#__PURE__*/
    // selector should only be use-able in an instance dash or if there is no initial aggregation
    React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item-half")
    }, /*#__PURE__*/React__default.createElement(Dropdown, {
      id: "".concat(id, "_aggregation-method"),
      label: "",
      direction: "bottom",
      itemToString: function itemToString(item) {
        return item.text;
      },
      items: editDataItem.aggregationMethods || [],
      selectedItem: ((_editDataItem$aggrega = editDataItem.aggregationMethods) === null || _editDataItem$aggrega === void 0 ? void 0 : _editDataItem$aggrega.find(function (method) {
        return method.id === editDataItem.aggregationMethod;
      })) || {
        id: 'none',
        text: mergedI18n.none
      },
      titleText: mergedI18n.aggregationMethod,
      light: true,
      onChange: function onChange(_ref3) {
        var _availableGrains$;
        var selectedItem = _ref3.selectedItem;
        setEditDataItem(_omit.apply(void 0, [_objectSpread(_objectSpread({}, editDataItem), {}, {
          aggregationMethod: selectedItem.id
        }, isTimeBasedCard$1 && selectedItem.id !== 'none' && !editDataItem.grain ? {
          grain: (_availableGrains$ = availableGrains[0]) === null || _availableGrains$ === void 0 ? void 0 : _availableGrains$.id
        } : {})].concat(_toConsumableArray(selectedItem.id === 'none' ? ['grain'] : []))));
      },
      autoAlign: true
    })) : /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item-half")
    }, /*#__PURE__*/React__default.createElement(FormLabel, {
      className: "".concat(baseClassName, "--input-group--item-half-label")
    }, mergedI18n.aggregationMethod), /*#__PURE__*/React__default.createElement("span", {
      className: "".concat(baseClassName, "--input-group--item-half-content")
    }, "".concat(editDataItem.aggregationMethod ? editDataItem.aggregationMethod[0].toUpperCase() : '').concat(((_editDataItem$aggrega2 = editDataItem.aggregationMethod) === null || _editDataItem$aggrega2 === void 0 ? void 0 : _editDataItem$aggrega2.slice(1)) || ''))), hasGrainsDropDown && hasGrainsDropDown(cardConfig, editDataItem) ? /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item-half")
    }, /*#__PURE__*/React__default.createElement(Dropdown, {
      id: "".concat(id, "_grain-selector"),
      label: "",
      direction: "bottom",
      itemToString: function itemToString(item) {
        return item.text;
      },
      items: isSummaryDashboard && initialAggregation // limit options for aggregated metrics in a summary dash
      ? availableGrains.slice(availableGrains.findIndex(function (grain) {
        return grain.id === initialGrain;
      })) : availableGrains,
      selectedItem: availableGrains.find(function (grain) {
        return grain.id === editDataItem.grain;
      }) || availableGrains[0],
      titleText: mergedI18n.grain,
      light: true,
      onChange: function onChange(_ref4) {
        var selectedItem = _ref4.selectedItem;
        setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          grain: selectedItem.id
        }));
      },
      autoAlign: true
    })) : /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item-half")
    })), /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group")
    }, /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, /*#__PURE__*/React__default.createElement(TextInput, {
      id: "".concat(id, "_attribute-label"),
      labelText: mergedI18n.dataItemEditorDataItemCustomLabel,
      light: true,
      onChange: function onChange(evt) {
        return setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          label: evt.target.value
        }));
      },
      value: getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
      helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
    })), hasColorDropdown &&
    /*#__PURE__*/
    // show color selector
    React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, /*#__PURE__*/React__default.createElement(ColorDropdown, {
      id: "".concat(id, "_color-dropdown"),
      label: "",
      titleText: type === CARD_TYPES.TIMESERIES ? mergedI18n.dataItemEditorLineColor : mergedI18n.dataItemEditorBarColor,
      selectedColor: DATAITEM_COLORS_OPTIONS.find(function (_ref5) {
        var carbonColor = _ref5.carbonColor;
        return carbonColor === editDataItem.color;
      }),
      onChange: function onChange(_ref6) {
        var color = _ref6.color;
        return setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          color: color.carbonColor
        }));
      }
    })), hasTooltip && /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, /*#__PURE__*/React__default.createElement(TextInput, {
      id: "".concat(id, "_attribute-tooltip"),
      labelText: mergedI18n.dataItemEditorDataItemTooltip,
      light: true,
      onChange: function onChange(evt) {
        return setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          tooltip: evt.target.value
        }));
      },
      value: editDataItem.tooltip
    }))), (hasUnit || hasDecimalPlacesDropdown) && /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group")
    }, hasUnit && /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, /*#__PURE__*/React__default.createElement(TextInput, {
      id: "".concat(id, "_attribute-unit"),
      labelText: mergedI18n.dataItemEditorDataItemUnit,
      light: true,
      placeholder: "".concat(mergedI18n.example, ": %"),
      onChange: function onChange(evt) {
        return setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          unit: evt.target.value
        }));
      },
      value: getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)
    })), /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, hasDecimalPlacesDropdown && /*#__PURE__*/React__default.createElement(Dropdown, {
      id: "".concat(id, "_value-card-decimal-place"),
      titleText: mergedI18n.decimalPlacesLabel,
      direction: "bottom",
      label: "",
      items: [mergedI18n.notSet, '0', '1', '2', '3', '4'],
      light: true,
      selectedItem: ((_editDataItem$precisi = editDataItem.precision) === null || _editDataItem$precisi === void 0 ? void 0 : _editDataItem$precisi.toString()) || mergedI18n.notSet,
      onChange: function onChange(_ref7) {
        var selectedItem = _ref7.selectedItem;
        var isSet = selectedItem !== mergedI18n.notSet;
        if (isSet) {
          setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
            precision: Number(selectedItem)
          }));
        } else {
          setEditDataItem(_omit(editDataItem, 'precision'));
        }
      },
      autoAlign: true
    }))), hasDataFilterDropdown && hasDataFilterDropdown(cardConfig) &&
    /*#__PURE__*/
    // only show data filter in summary dashboards or instance dashboard for DEVICE_TYPE
    React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group ").concat(baseClassName, "--input-group--bottom ")
    }, /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, /*#__PURE__*/React__default.createElement(Dropdown, {
      id: "".concat(id, "_data-filter-key"),
      label: "",
      translateWithId: handleTranslation,
      direction: "bottom",
      items: [mergedI18n.none].concat(_toConsumableArray(Object.keys(availableDimensions))),
      light: true,
      selectedItem: selectedDimensionFilter || mergedI18n.none,
      onChange: function onChange(_ref8) {
        var selectedItem = _ref8.selectedItem;
        if (selectedItem !== mergedI18n.none) {
          var dataFilter = _defineProperty({}, selectedItem, availableDimensions[selectedItem].sort()[0]);
          setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
            dataFilter: dataFilter
          }));
        } else {
          setEditDataItem(_objectSpread({}, _omit(editDataItem, 'dataFilter')));
        }
      },
      titleText: mergedI18n.dataItemEditorDataItemFilter,
      autoAlign: true
    })), /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(baseClassName, "--input-group--item")
    }, !isEmpty(editDataItem.dataFilter) && (availableDimensionsItems === null || availableDimensionsItems === void 0 ? void 0 : availableDimensionsItems.length) > 0 && /*#__PURE__*/React__default.createElement(Dropdown, {
      id: "".concat(id, "_data-filter-value"),
      label: "",
      direction: "bottom",
      items: availableDimensionsItems,
      light: true,
      itemToString: function itemToString(item) {
        return item ? item.text : '';
      },
      selectedItem: availableDimensionsItems.find(function (item) {
        var _editDataItem$dataFil;
        return item.id === ((_editDataItem$dataFil = editDataItem.dataFilter) === null || _editDataItem$dataFil === void 0 ? void 0 : _editDataItem$dataFil[selectedDimensionFilter]);
      }),
      onChange: function onChange(_ref9) {
        var selectedItem = _ref9.selectedItem;
        var dataFilter = _defineProperty({}, selectedDimensionFilter, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id);
        setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          dataFilter: dataFilter
        }));
      },
      autoAlign: true
    }))), hasThresholds && /*#__PURE__*/React__default.createElement(ThresholdsFormItem, {
      id: "".concat(id, "_thresholds"),
      i18n: mergedI18n,
      cardConfig: cardConfig,
      dataSourceId: type !== CARD_TYPES.VALUE ? editDataItem.dataSourceId : null,
      thresholds: editDataItem.thresholds,
      translateWithId: handleTranslation,
      selectedIcon: {
        carbonIcon: /*#__PURE__*/React__default.createElement(WarningAlt, {
          size: 32
        }),
        name: 'Warning alt'
      },
      selectedColor: {
        carbonColor: red60,
        name: 'red60'
      },
      onChange: function onChange(thresholds) {
        setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
          thresholds: thresholds
        }));
      },
      columnType: editDataItem.columnType || editDataItem.type
    }));
  }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, type]);
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showEditor && /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--modal-wrapper")
  }, /*#__PURE__*/React__default.createElement(ComposedModal, {
    selectorPrimaryFocus: ".".concat(prefix, "--modal-header"),
    header: {
      label: editDataItem.dataItemId,
      title: type === CARD_TYPES.VALUE ? mergedI18n.dataItemEditorValueCardTitle : mergedI18n.dataItemEditorDataSeriesTitle
    },
    size: "md",
    isLarge: isLarge,
    footer: {
      primaryButtonLabel: mergedI18n.primaryButtonLabelText,
      secondaryButtonLabel: mergedI18n.secondaryButtonLabelText
    },
    onSubmit: function onSubmit() {
      var newCard = cardConfig.type === CARD_TYPES.IMAGE ? editDataItem : handleDataItemEdit(editDataItem, cardConfig, editDataSeries);
      onChange(newCard);
      setShowEditor(false);
      setEditDataItem({});
    },
    iconDescription: mergedI18n.closeButtonLabelText,
    onClose: function onClose() {
      setShowEditor(false);
      setEditDataItem({});
    }
  }, DataEditorContent)));
};
DataSeriesFormItemModal.defaultProps = defaultProps;
DataSeriesFormItemModal.propTypes = propTypes;
DataSeriesFormItemModal.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DataSeriesFormItemModal",
  "props": {
    "cardConfig": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "id": {
            "name": "string",
            "required": false
          },
          "title": {
            "name": "string",
            "required": false
          },
          "size": {
            "name": "string",
            "required": false
          },
          "type": {
            "name": "string",
            "required": false
          },
          "content": {
            "name": "shape",
            "value": {
              "series": {
                "name": "arrayOf",
                "value": {
                  "name": "shape",
                  "value": {
                    "label": {
                      "name": "string",
                      "required": false
                    },
                    "dataSourceId": {
                      "name": "string",
                      "required": false
                    },
                    "color": {
                      "name": "string",
                      "required": false
                    }
                  }
                },
                "required": false
              },
              "columns": {
                "name": "arrayOf",
                "value": {
                  "name": "shape",
                  "value": {
                    "dataSourceId": {
                      "name": "string",
                      "required": false
                    },
                    "label": {
                      "name": "string",
                      "required": false
                    },
                    "type": {
                      "name": "string",
                      "required": false
                    },
                    "dataItemType": {
                      "name": "string",
                      "required": false
                    }
                  }
                },
                "required": false
              },
              "type": {
                "name": "string",
                "required": false
              },
              "xLabel": {
                "name": "string",
                "required": false
              },
              "yLabel": {
                "name": "string",
                "required": false
              },
              "unit": {
                "name": "string",
                "required": false
              },
              "includeZeroOnXaxis": {
                "name": "bool",
                "required": false
              },
              "includeZeroOnYaxis": {
                "name": "bool",
                "required": false
              },
              "timeDataSourceId": {
                "name": "string",
                "required": false
              }
            },
            "required": false
          },
          "interval": {
            "name": "string",
            "required": false
          },
          "showLegend": {
            "name": "bool",
            "required": false
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  dataItemEditorDataSeriesTitle: 'Customize data series',\n  dataItemEditorValueCardTitle: 'Edit data',\n  dataItemEditorDataItemLabel: 'Label',\n  dataItemEditorLegendColor: 'Legend color',\n  dataItemEditorSectionTitle: 'Data series',\n  selectDataItems: 'Select data items',\n  dataItem: 'Data item',\n  edit: 'Edit',\n  example: 'Example',\n  notSet: 'Not set',\n  none: 'None',\n  dataItemEditorDataItemCustomLabel: 'Custom label',\n  dataItemEditorDataItemHelperText: (dataItemSource, dataItemId) =>\n    `${dataItemSource}: ${dataItemId}`,\n  dataItemEditorDataItemUnit: 'Unit',\n  dataItemEditorDataItemFilter: 'Data filter',\n  dataItemEditorDataItemThresholds: 'Thresholds',\n  dataItemEditorDataItemAddThreshold: 'Add threshold',\n  dataItemEditorDataItemTooltip: 'Tooltip',\n  dataItemEditorBarColor: 'Bar color',\n  dataItemEditorLineColor: 'Line color',\n  dataItemEditorAddAggregationMethodLabel: 'Add aggregation method',\n  dataItemEditorAddAggregationMethodDescription: 'Add aggregation method',\n  source: 'Source data item',\n  aggregationMethod: 'Aggregation method',\n  grain: 'Grain',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  yearlyLabel: 'Yearly',\n  dataItemSource: 'Data item source',\n  primaryButtonLabelText: 'Save',\n  secondaryButtonLabelText: 'Cancel',\n  decimalPlacesLabel: 'Decimal places',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "dataItemEditorDataItemTitle": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemLabel": {
            "name": "string",
            "required": false
          },
          "dataItemEditorLegendColor": {
            "name": "string",
            "required": false
          },
          "dataItemEditorSectionTitle": {
            "name": "string",
            "required": false
          },
          "selectDataItems": {
            "name": "string",
            "required": false
          },
          "dataItem": {
            "name": "string",
            "required": false
          },
          "edit": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemCustomLabel": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemHelperText": {
            "name": "func",
            "description": "Function receiving the dataItemSource & dataItemId as params:\n(dataItemSource, dataItemId) => `${dataItemSource}: ${dataItemId}`",
            "required": false
          },
          "dataItemEditorDataItemUnit": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemFilter": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemThresholds": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemAddThreshold": {
            "name": "string",
            "required": false
          },
          "source": {
            "name": "string",
            "required": false
          },
          "primaryButtonLabelText": {
            "name": "string",
            "required": false
          },
          "secondaryButtonLabelText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "shouldUseTranslatedLabels": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "whether to use translated labels in cards",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "editDataSeries": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "dataSourceId": {
              "name": "string",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            },
            "color": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "showEditor": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "setShowEditor": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "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
    },
    "editDataItem": {
      "defaultValue": {
        "value": "{\n  columnType: undefined,\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "columnType": {
            "name": "enum",
            "value": [{
              "value": "'LITERAL'",
              "computed": false
            }, {
              "value": "'BOOLEAN'",
              "computed": false
            }, {
              "value": "'TIMESTAMP'",
              "computed": false
            }, {
              "value": "'NUMBER'",
              "computed": false
            }],
            "required": false
          },
          "dataSourceId": {
            "name": "string",
            "required": false
          },
          "dataFilter": {
            "name": "objectOf",
            "value": {
              "name": "string"
            },
            "required": false
          },
          "type": {
            "name": "string",
            "description": "Maps to data item columnType",
            "required": false
          },
          "dataItemType": {
            "name": "string",
            "description": "Maps to data item type",
            "required": false
          },
          "aggregationMethods": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "id": {
                  "name": "string",
                  "required": false
                },
                "text": {
                  "name": "string",
                  "required": false
                }
              }
            },
            "required": false
          },
          "aggregationMethod": {
            "name": "string",
            "required": false
          },
          "grain": {
            "name": "string",
            "required": false
          },
          "label": {
            "name": "string",
            "required": false
          },
          "dataItemId": {
            "name": "string",
            "required": false
          },
          "color": {
            "name": "string",
            "required": false
          },
          "unit": {
            "name": "string",
            "required": false
          },
          "precision": {
            "name": "number",
            "required": false
          },
          "thresholds": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "color": {
                  "name": "string",
                  "required": false
                },
                "comparison": {
                  "name": "custom",
                  "raw": "PropTypes.stirng",
                  "required": false
                },
                "icon": {
                  "name": "string",
                  "required": false
                },
                "value": {
                  "name": "union",
                  "value": [{
                    "name": "bool"
                  }, {
                    "name": "number"
                  }, {
                    "name": "string"
                  }],
                  "required": false
                }
              }
            },
            "required": false
          },
          "tooltip": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "setEditDataItem": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isSummaryDashboard": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isLarge": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "validDataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DataItemsPropTypes"
      },
      "required": false
    },
    "actions": {
      "defaultValue": {
        "value": "defaultDashboardEditorActionsProps",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DashboardEditorActionsPropTypes"
      },
      "required": false
    },
    "handleDataItemEdit": {
      "defaultValue": {
        "value": "handleDefaultDataItemEdit",
        "computed": true
      },
      "description": "Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "options": {
      "defaultValue": {
        "value": "{\n  hasColorDropdown: false,\n  hasUnit: false,\n  hasDecimalPlacesDropdown: false,\n  hasThresholds: false,\n  hasTooltip: false,\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "hasColorDropdown": {
            "name": "bool",
            "required": false
          },
          "hasUnit": {
            "name": "bool",
            "required": false
          },
          "hasDecimalPlacesDropdown": {
            "name": "bool",
            "required": false
          },
          "hasThresholds": {
            "name": "bool",
            "required": false
          },
          "hasTooltip": {
            "name": "bool",
            "required": false
          }
        }
      },
      "required": false
    },
    "onChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var DataSeriesFormItemModal$1 = DataSeriesFormItemModal;

export { DataSeriesFormItemModal$1 as default };
