'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.filter.js');
require('core-js/modules/es.object.get-own-property-descriptor.js');
require('core-js/modules/es.object.get-own-property-descriptors.js');
require('core-js/modules/es.object.keys.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/web.dom-collections.for-each.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var LayoutConstants = require('../../../constants/LayoutConstants.js');
var Settings = require('../../../constants/Settings.js');
var editorUtils = require('../../DashboardEditor/editorUtils.js');
var CardEditFormContent = require('./CardEditFormContent.js');
var CardEditFormSettings = require('./CardEditFormSettings.js');

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

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /** card data value */
  cardConfig: PropTypes__default.default.object,
  // eslint-disable-line react/forbid-prop-types
  /** Callback function when form data changes */
  onChange: PropTypes__default.default.func.isRequired,
  i18n: PropTypes__default.default.shape({
    openEditorButton: PropTypes__default.default.string,
    contentTabLabel: PropTypes__default.default.string,
    settingsTabLabel: PropTypes__default.default.string,
    cardSize_SMALL: PropTypes__default.default.string,
    cardSize_SMALLWIDE: PropTypes__default.default.string,
    cardSize_SMALLFULL: PropTypes__default.default.string,
    cardSize_MEDIUM: PropTypes__default.default.string,
    cardSize_MEDIUMTHIN: PropTypes__default.default.string,
    cardSize_MEDIUMWIDE: PropTypes__default.default.string,
    cardSize_LARGE: PropTypes__default.default.string,
    cardSize_LARGETHIN: PropTypes__default.default.string,
    cardSize_LARGEWIDE: PropTypes__default.default.string,
    chartType_BAR: PropTypes__default.default.string,
    chartType_LINE: PropTypes__default.default.string,
    barChartType_SIMPLE: PropTypes__default.default.string,
    barChartType_GROUPED: PropTypes__default.default.string,
    barChartType_STACKED: PropTypes__default.default.string,
    barChartLayout_HORIZONTAL: PropTypes__default.default.string,
    barChartLayout_VERTICAL: PropTypes__default.default.string,
    errorTitle: PropTypes__default.default.string,
    modalTitle: PropTypes__default.default.string,
    modalLabel: PropTypes__default.default.string,
    modalHelpText: PropTypes__default.default.string,
    modalIconDescription: PropTypes__default.default.string
  }),
  /** whether to use translated labels in cards */
  shouldUseTranslatedLabels: PropTypes__default.default.bool,
  /** if provided, returns an array of strings which are the dataItems to be allowed
   * on each card
   * getValidDataItems(card, selectedTimeRange)
   */
  getValidDataItems: PropTypes__default.default.func,
  /** if provided, returns an array of strings which are the timeRanges to be allowed
   * on each card
   * getValidTimeRanges(card, selectedDataItems)
   */
  getValidTimeRanges: PropTypes__default.default.func,
  /** an array of dataItems to be included on each card
   * this prop will be ignored if getValidDataItems is defined
   */
  dataItems: editorUtils.DataItemsPropTypes,
  /** an object where the keys are available dimensions and the values are the values available for those dimensions
   *  ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
   */
  availableDimensions: PropTypes__default.default.shape({}),
  currentBreakpoint: PropTypes__default.default.string,
  isSummaryDashboard: PropTypes__default.default.bool,
  /** optional link href's for each card type that will appear in a tooltip */
  dataSeriesItemLinks: PropTypes__default.default.shape({
    simpleBar: PropTypes__default.default.string,
    groupedBar: PropTypes__default.default.string,
    stackedBar: PropTypes__default.default.string,
    timeSeries: PropTypes__default.default.string,
    value: PropTypes__default.default.string,
    custom: PropTypes__default.default.string,
    table: PropTypes__default.default.string,
    image: PropTypes__default.default.string
  }),
  actions: editorUtils.DashboardEditorActionsPropTypes
};
var defaultProps = {
  cardConfig: {},
  i18n: {
    openEditorButton: 'Open JSON editor',
    contentTabLabel: 'Content',
    settingsTabLabel: 'Settings',
    cardSize_SMALL: 'Small',
    cardSize_SMALLWIDE: 'Small wide',
    cardSize_SMALLFULL: 'Small full',
    cardSize_MEDIUM: 'Medium',
    cardSize_MEDIUMTHIN: 'Medium thin',
    cardSize_MEDIUMWIDE: 'Medium wide',
    cardSize_LARGE: 'Large',
    cardSize_LARGETHIN: 'Large thin',
    cardSize_LARGEWIDE: 'Large wide',
    chartType_BAR: 'Bar',
    chartType_LINE: 'Line',
    barChartType_SIMPLE: 'Simple',
    barChartType_GROUPED: 'Grouped',
    barChartType_STACKED: 'Stacked',
    barChartLayout_HORIZONTAL: 'Horizontal',
    barChartLayout_VERTICAL: 'Vertical',
    errorTitle: 'Error:',
    modalTitle: 'Edit card JSON configuration',
    modalLabel: 'Card editor',
    modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
    modalIconDescription: 'Close'
  },
  shouldUseTranslatedLabels: false,
  getValidDataItems: null,
  getValidTimeRanges: null,
  dataItems: [],
  availableDimensions: {},
  currentBreakpoint: 'xl',
  isSummaryDashboard: false,
  dataSeriesItemLinks: null,
  actions: editorUtils.defaultDashboardEditorActionsProps
};
var CardEditForm = function CardEditForm(_ref) {
  var cardConfig = _ref.cardConfig,
    isSummaryDashboard = _ref.isSummaryDashboard,
    onChange = _ref.onChange,
    i18n = _ref.i18n,
    dataItems = _ref.dataItems,
    getValidDataItems = _ref.getValidDataItems,
    getValidTimeRanges = _ref.getValidTimeRanges,
    currentBreakpoint = _ref.currentBreakpoint,
    availableDimensions = _ref.availableDimensions,
    dataSeriesItemLinks = _ref.dataSeriesItemLinks,
    onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
    actions = _ref.actions;
  var mergedI18n = React.useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var baseClassName = "".concat(iotPrefix, "--card-edit-form");
  var isCustomCardWithNoSettings = (cardConfig.type === LayoutConstants.CARD_TYPES.CUSTOM || !LayoutConstants.CARD_TYPES.hasOwnProperty(cardConfig.type)) && !cardConfig.renderEditSettings;
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: baseClassName
  }, /*#__PURE__*/React__default.default.createElement(react.Tabs, null, /*#__PURE__*/React__default.default.createElement(react.TabList, {
    contained: true,
    fullWidth: true
  }, /*#__PURE__*/React__default.default.createElement(react.Tab, null, mergedI18n.contentTabLabel), !isCustomCardWithNoSettings ? /*#__PURE__*/React__default.default.createElement(react.Tab, null, mergedI18n.settingsTabLabel) : null), /*#__PURE__*/React__default.default.createElement(react.TabPanels, null, /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, /*#__PURE__*/React__default.default.createElement(CardEditFormContent.default, {
    cardConfig: cardConfig,
    onChange: onChange,
    isSummaryDashboard: isSummaryDashboard,
    i18n: mergedI18n,
    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
    dataItems: dataItems,
    availableDimensions: availableDimensions,
    getValidDataItems: getValidDataItems,
    getValidTimeRanges: getValidTimeRanges,
    currentBreakpoint: currentBreakpoint,
    dataSeriesItemLinks: dataSeriesItemLinks,
    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
    actions: actions
  })), !isCustomCardWithNoSettings ? /*#__PURE__*/React__default.default.createElement(react.TabPanel, null, /*#__PURE__*/React__default.default.createElement(CardEditFormSettings, {
    availableDimensions: availableDimensions,
    cardConfig: cardConfig,
    onChange: onChange,
    i18n: mergedI18n,
    getValidDataItems: getValidDataItems,
    getValidTimeRanges: getValidTimeRanges,
    currentBreakpoint: currentBreakpoint,
    dataSeriesItemLinks: dataSeriesItemLinks,
    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots
  })) : null)));
};
CardEditForm.propTypes = propTypes;
CardEditForm.defaultProps = defaultProps;
CardEditForm.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CardEditForm",
  "props": {
    "cardConfig": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "card data value",
      "type": {
        "name": "object"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  openEditorButton: 'Open JSON editor',\n  contentTabLabel: 'Content',\n  settingsTabLabel: 'Settings',\n  cardSize_SMALL: 'Small',\n  cardSize_SMALLWIDE: 'Small wide',\n  cardSize_SMALLFULL: 'Small full',\n  cardSize_MEDIUM: 'Medium',\n  cardSize_MEDIUMTHIN: 'Medium thin',\n  cardSize_MEDIUMWIDE: 'Medium wide',\n  cardSize_LARGE: 'Large',\n  cardSize_LARGETHIN: 'Large thin',\n  cardSize_LARGEWIDE: 'Large wide',\n  chartType_BAR: 'Bar',\n  chartType_LINE: 'Line',\n  barChartType_SIMPLE: 'Simple',\n  barChartType_GROUPED: 'Grouped',\n  barChartType_STACKED: 'Stacked',\n  barChartLayout_HORIZONTAL: 'Horizontal',\n  barChartLayout_VERTICAL: 'Vertical',\n  errorTitle: 'Error:',\n  modalTitle: 'Edit card JSON configuration',\n  modalLabel: 'Card editor',\n  modalHelpText:\n    'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',\n  modalIconDescription: 'Close',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "openEditorButton": {
            "name": "string",
            "required": false
          },
          "contentTabLabel": {
            "name": "string",
            "required": false
          },
          "settingsTabLabel": {
            "name": "string",
            "required": false
          },
          "cardSize_SMALL": {
            "name": "string",
            "required": false
          },
          "cardSize_SMALLWIDE": {
            "name": "string",
            "required": false
          },
          "cardSize_SMALLFULL": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUM": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUMTHIN": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUMWIDE": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGE": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGETHIN": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGEWIDE": {
            "name": "string",
            "required": false
          },
          "chartType_BAR": {
            "name": "string",
            "required": false
          },
          "chartType_LINE": {
            "name": "string",
            "required": false
          },
          "barChartType_SIMPLE": {
            "name": "string",
            "required": false
          },
          "barChartType_GROUPED": {
            "name": "string",
            "required": false
          },
          "barChartType_STACKED": {
            "name": "string",
            "required": false
          },
          "barChartLayout_HORIZONTAL": {
            "name": "string",
            "required": false
          },
          "barChartLayout_VERTICAL": {
            "name": "string",
            "required": false
          },
          "errorTitle": {
            "name": "string",
            "required": false
          },
          "modalTitle": {
            "name": "string",
            "required": false
          },
          "modalLabel": {
            "name": "string",
            "required": false
          },
          "modalHelpText": {
            "name": "string",
            "required": false
          },
          "modalIconDescription": {
            "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
    },
    "getValidDataItems": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, returns an array of strings which are the dataItems to be allowed\non each card\ngetValidDataItems(card, selectedTimeRange)",
      "type": {
        "name": "func"
      },
      "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
    },
    "dataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "an array of dataItems to be included on each card\nthis prop will be ignored if getValidDataItems is defined",
      "type": {
        "name": "custom",
        "raw": "DataItemsPropTypes"
      },
      "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
    },
    "currentBreakpoint": {
      "defaultValue": {
        "value": "'xl'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isSummaryDashboard": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "dataSeriesItemLinks": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "optional link href's for each card type that will appear in a tooltip",
      "type": {
        "name": "shape",
        "value": {
          "simpleBar": {
            "name": "string",
            "required": false
          },
          "groupedBar": {
            "name": "string",
            "required": false
          },
          "stackedBar": {
            "name": "string",
            "required": false
          },
          "timeSeries": {
            "name": "string",
            "required": false
          },
          "value": {
            "name": "string",
            "required": false
          },
          "custom": {
            "name": "string",
            "required": false
          },
          "table": {
            "name": "string",
            "required": false
          },
          "image": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "actions": {
      "defaultValue": {
        "value": "defaultDashboardEditorActionsProps",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DashboardEditorActionsPropTypes"
      },
      "required": false
    },
    "onChange": {
      "description": "Callback function when form data changes",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var CardEditForm$1 = CardEditForm;

module.exports = CardEditForm$1;
