import _defineProperty from '@babel/runtime/helpers/defineProperty';
import isEmpty from '../../../node_modules/lodash-es/isEmpty.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.symbol.description.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.map.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 React__default from 'react';
import PropTypes from 'prop-types';
import { TextInput, TextArea, Dropdown } from '@carbon/react';
import { ALLOWED_CARD_SIZES_PER_TYPE, CARD_SIZES, CARD_DIMENSIONS } from '../../../constants/LayoutConstants.js';
import { settings } from '../../../constants/Settings.js';
import { timeRangeToJSON } from '../../DashboardEditor/editorUtils.js';
import { getTranslatedLabel } from '../../../utils/cardUtilityFunctions.js';

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;
var propTypes = {
  /** card data value */
  cardConfig: PropTypes.shape({
    id: PropTypes.string,
    title: PropTypes.string,
    size: PropTypes.string,
    type: PropTypes.string,
    description: PropTypes.string,
    timeRange: PropTypes.string,
    dataSource: PropTypes.shape({
      attributes: PropTypes.arrayOf(PropTypes.shape({
        aggregator: PropTypes.string,
        attribute: PropTypes.string,
        id: PropTypes.string
      }))
    }),
    content: PropTypes.oneOfType([PropTypes.shape({
      series: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string,
        dataSourceId: PropTypes.string,
        color: PropTypes.string
      })),
      xLabel: PropTypes.string,
      yLabel: PropTypes.string,
      unit: PropTypes.string,
      includeZeroOnXaxis: PropTypes.bool,
      includeZeroOnYaxis: PropTypes.bool,
      timeDataSourceId: PropTypes.string,
      showLegend: PropTypes.bool
    }), PropTypes.shape({
      id: PropTypes.string,
      src: PropTypes.string,
      zoomMax: PropTypes.number
    })])
  }),
  /** Callback function when form data changes */
  onChange: PropTypes.func.isRequired,
  i18n: PropTypes.shape({
    cardTitle: PropTypes.string,
    description: PropTypes.string,
    size: PropTypes.string,
    selectASize: PropTypes.string,
    timeRange: PropTypes.string,
    selectATimeRange: PropTypes.string,
    last24HoursLabel: PropTypes.string,
    last7DaysLabel: PropTypes.string,
    lastMonthLabel: PropTypes.string,
    lastQuarterLabel: PropTypes.string,
    lastYearLabel: PropTypes.string,
    thisWeekLabel: PropTypes.string,
    thisMonthLabel: PropTypes.string,
    thisQuarterLabel: PropTypes.string,
    thisYearLabel: PropTypes.string
  }),
  /** whether to use translated labels in cards */
  shouldUseTranslatedLabels: PropTypes.bool,
  /** if provided, returns an array of strings which are the timeRanges to be allowed
   * on each card
   * getValidTimeRanges(card, selectedDataItems)
   */
  getValidTimeRanges: PropTypes.func,
  currentBreakpoint: PropTypes.string,
  /** 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({}),
  selectedDataItems: PropTypes.arrayOf(PropTypes.string),
  setSelectedTimeRange: PropTypes.func.isRequired,
  translateWithId: PropTypes.func.isRequired
};
var defaultProps = {
  cardConfig: {},
  i18n: {
    cardTitle: 'Card title',
    description: 'Description (Optional)',
    size: 'Size',
    selectASize: 'Select a size',
    timeRange: 'Time range',
    selectATimeRange: 'Select a time range',
    last24HoursLabel: 'Last 24 hours',
    last7DaysLabel: 'Last 7 days',
    lastMonthLabel: 'Last month',
    lastQuarterLabel: 'Last quarter',
    lastYearLabel: 'Last year',
    thisWeekLabel: 'This week',
    thisMonthLabel: 'This month',
    thisQuarterLabel: 'This quarter',
    thisYearLabel: 'This year'
  },
  shouldUseTranslatedLabels: false,
  selectedDataItems: [],
  getValidTimeRanges: null,
  currentBreakpoint: 'xl',
  availableDimensions: {}
};
var defaultTimeRangeOptions = ['last24Hours', 'last7Days', 'lastMonth', 'lastQuarter', 'lastYear', 'thisWeek', 'thisMonth', 'thisQuarter', 'thisYear'];

/**
 * Returns card size and dimensions labels
 * @param {string} size
 * @param {Object<string>} i18n
 * @returns {string}
 */
var getCardSizeText = function getCardSizeText(size, i18n, breakpoint) {
  var sizeName = i18n["cardSize_".concat(size)];
  var sizeDimensions = "(".concat(CARD_DIMENSIONS[size][breakpoint].w, "x").concat(CARD_DIMENSIONS[size][breakpoint].h, ")");
  return "".concat(sizeName, " ").concat(sizeDimensions);
};
var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
  var _ALLOWED_CARD_SIZES_P;
  var cardConfig = _ref.cardConfig,
    _onChange = _ref.onChange,
    i18n = _ref.i18n,
    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
    getValidTimeRanges = _ref.getValidTimeRanges,
    currentBreakpoint = _ref.currentBreakpoint,
    selectedDataItems = _ref.selectedDataItems,
    setSelectedTimeRange = _ref.setSelectedTimeRange,
    translateWithId = _ref.translateWithId;
  var title = cardConfig.title,
    description = cardConfig.description,
    size = cardConfig.size,
    type = cardConfig.type,
    id = cardConfig.id;
  var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  var baseClassName = "".concat(iotPrefix, "--card-edit-form");
  var validTimeRanges = getValidTimeRanges ? getValidTimeRanges(cardConfig, selectedDataItems) : defaultTimeRangeOptions;
  var validTimeRangeOptions = validTimeRanges.map(function (range) {
    return {
      id: range,
      text: mergedI18n["".concat(range, "Label")] || range
    };
  });
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.createElement(TextInput, {
    id: "".concat(id, "_title"),
    labelText: mergedI18n.cardTitle,
    light: true,
    onChange: function onChange(evt) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        title: evt.target.value
      }));
    },
    value: getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.createElement(TextArea, {
    id: "".concat(id, "_description"),
    labelText: mergedI18n.description,
    light: true,
    onChange: function onChange(evt) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        description: evt.target.value
      }));
    },
    value: getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.createElement(Dropdown, {
    id: "".concat(id, "_size"),
    label: mergedI18n.selectASize,
    direction: "bottom",
    itemToString: function itemToString(item) {
      return item.text;
    },
    items: ((_ALLOWED_CARD_SIZES_P = ALLOWED_CARD_SIZES_PER_TYPE[type]) !== null && _ALLOWED_CARD_SIZES_P !== void 0 ? _ALLOWED_CARD_SIZES_P : Object.keys(CARD_SIZES)).map(function (cardSize) {
      return {
        id: cardSize,
        text: getCardSizeText(cardSize, mergedI18n, currentBreakpoint)
      };
    }),
    light: true,
    translateWithId: translateWithId,
    selectedItem: {
      id: size,
      text: getCardSizeText(size, mergedI18n, currentBreakpoint)
    },
    onChange: function onChange(_ref2) {
      var selectedItem = _ref2.selectedItem;
      _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        size: selectedItem.id
      }));
    },
    titleText: mergedI18n.size
  })), isEmpty(validTimeRangeOptions) ? null : /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.createElement(Dropdown, {
    key: "card_".concat(id),
    id: "".concat(id, "_time_range"),
    label: mergedI18n.selectATimeRange,
    title: mergedI18n.selectATimeRange,
    direction: "bottom",
    itemToString: function itemToString(item) {
      return item.text;
    },
    items: validTimeRangeOptions,
    selectedItem: validTimeRangeOptions.find(
    // This is a hacky workaround for a carbon issue
    function (validTimeRangeOption) {
      return validTimeRangeOption.id === cardConfig.timeRange;
    }),
    light: true,
    translateWithId: translateWithId,
    onChange: function onChange(_ref3) {
      var selectedItem = _ref3.selectedItem;
      var timeRangeInterval = selectedItem.id;
      var range = timeRangeToJSON[timeRangeInterval].range;
      setSelectedTimeRange(timeRangeInterval);
      _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        timeRange: timeRangeInterval,
        dataSource: _objectSpread(_objectSpread({}, cardConfig.dataSource), {}, {
          range: range
        })
      }));
    },
    titleText: mergedI18n.timeRange
  })));
};
CommonCardEditFormFields.propTypes = propTypes;
CommonCardEditFormFields.defaultProps = defaultProps;
CommonCardEditFormFields.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CommonCardEditFormFields",
  "props": {
    "cardConfig": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "card data value",
      "type": {
        "name": "shape",
        "value": {
          "id": {
            "name": "string",
            "required": false
          },
          "title": {
            "name": "string",
            "required": false
          },
          "size": {
            "name": "string",
            "required": false
          },
          "type": {
            "name": "string",
            "required": false
          },
          "description": {
            "name": "string",
            "required": false
          },
          "timeRange": {
            "name": "string",
            "required": false
          },
          "dataSource": {
            "name": "shape",
            "value": {
              "attributes": {
                "name": "arrayOf",
                "value": {
                  "name": "shape",
                  "value": {
                    "aggregator": {
                      "name": "string",
                      "required": false
                    },
                    "attribute": {
                      "name": "string",
                      "required": false
                    },
                    "id": {
                      "name": "string",
                      "required": false
                    }
                  }
                },
                "required": false
              }
            },
            "required": false
          },
          "content": {
            "name": "union",
            "value": [{
              "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
                },
                "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
                },
                "showLegend": {
                  "name": "bool",
                  "required": false
                }
              }
            }, {
              "name": "shape",
              "value": {
                "id": {
                  "name": "string",
                  "required": false
                },
                "src": {
                  "name": "string",
                  "required": false
                },
                "zoomMax": {
                  "name": "number",
                  "required": false
                }
              }
            }],
            "required": false
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  cardTitle: 'Card title',\n  description: 'Description (Optional)',\n  size: 'Size',\n  selectASize: 'Select a size',\n  timeRange: 'Time range',\n  selectATimeRange: 'Select a time range',\n  last24HoursLabel: 'Last 24 hours',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "cardTitle": {
            "name": "string",
            "required": false
          },
          "description": {
            "name": "string",
            "required": false
          },
          "size": {
            "name": "string",
            "required": false
          },
          "selectASize": {
            "name": "string",
            "required": false
          },
          "timeRange": {
            "name": "string",
            "required": false
          },
          "selectATimeRange": {
            "name": "string",
            "required": false
          },
          "last24HoursLabel": {
            "name": "string",
            "required": false
          },
          "last7DaysLabel": {
            "name": "string",
            "required": false
          },
          "lastMonthLabel": {
            "name": "string",
            "required": false
          },
          "lastQuarterLabel": {
            "name": "string",
            "required": false
          },
          "lastYearLabel": {
            "name": "string",
            "required": false
          },
          "thisWeekLabel": {
            "name": "string",
            "required": false
          },
          "thisMonthLabel": {
            "name": "string",
            "required": false
          },
          "thisQuarterLabel": {
            "name": "string",
            "required": false
          },
          "thisYearLabel": {
            "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
    },
    "selectedDataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "string"
        }
      },
      "required": false
    },
    "getValidTimeRanges": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, returns an array of strings which are the timeRanges to be allowed\non each card\ngetValidTimeRanges(card, selectedDataItems)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "currentBreakpoint": {
      "defaultValue": {
        "value": "'xl'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "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
    },
    "onChange": {
      "description": "Callback function when form data changes",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "setSelectedTimeRange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "translateWithId": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var CommonCardEditFormFields$1 = CommonCardEditFormFields;

export { CommonCardEditFormFields$1 as default, getCardSizeText };
