'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var omit = require('../../../../../node_modules/lodash-es/omit.js');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.filter.js');
require('core-js/modules/es.array.iterator.js');
require('core-js/modules/es.object.get-own-property-descriptor.js');
require('core-js/modules/es.object.get-own-property-descriptors.js');
require('core-js/modules/es.object.keys.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/web.dom-collections.for-each.js');
require('core-js/modules/web.dom-collections.iterator.js');
var React = require('react');
var PropTypes = require('prop-types');
var Button = require('../../../../Button/Button.js');
var editorUtils = require('../../../../DashboardEditor/editorUtils.js');
var HotspotEditorModal = require('../../../../HotspotEditorModal/HotspotEditorModal.js');
var Settings = require('../../../../../constants/Settings.js');
var ContentFormItemTitle = require('../ContentFormItemTitle.js');
var CardPropTypes = require('../../../../../constants/CardPropTypes.js');
var iconsReact = require('@carbon/icons-react');

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

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
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,
  prefix = Settings.settings.prefix;
var propTypes = {
  /* card value */
  cardConfig: PropTypes__default.default.shape({
    id: PropTypes__default.default.string,
    title: PropTypes__default.default.string,
    size: PropTypes__default.default.string,
    type: PropTypes__default.default.string,
    content: PropTypes__default.default.shape({
      id: PropTypes__default.default.string,
      src: PropTypes__default.default.string,
      zoomMax: PropTypes__default.default.number,
      displayOption: PropTypes__default.default.string
    }),
    values: CardPropTypes.ImageCardValuesPropType,
    interval: PropTypes__default.default.string
  }),
  /* callback when image cardConfig needs to be updated */
  onChange: PropTypes__default.default.func.isRequired,
  i18n: PropTypes__default.default.shape({
    imageFile: PropTypes__default.default.string,
    editImage: PropTypes__default.default.string,
    image: PropTypes__default.default.string,
    close: PropTypes__default.default.string,
    dataItemEditorSectionImageTooltipText: PropTypes__default.default.string
  }),
  /** optional link href's for each card type that will appear in a tooltip */
  dataSeriesItemLinks: PropTypes__default.default.shape({
    image: PropTypes__default.default.string
  }),
  translateWithId: PropTypes__default.default.func.isRequired,
  /** an array of dataItems to be included on each card */
  dataItems: editorUtils.DataItemsPropTypes,
  /** 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,
  /** 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({}),
  /** call back to retrieve the dynamic demo hotspots, by default just returns one example dynamic hotspot, override to return true hotspots.
   * See HotspotEditorModal propTypes for params and details */
  onFetchDynamicDemoHotspots: PropTypes__default.default.func,
  actions: editorUtils.DashboardEditorActionsPropTypes
};
var defaultProps = {
  cardConfig: {},
  i18n: {
    imageFile: 'Image file',
    editImage: 'Edit image',
    image: 'Image',
    close: 'Close',
    dataItemEditorSectionImageTooltipText: 'Add tooltips to hotspots on the image. Show metric or dimension values on the tooltips.'
  },
  dataSeriesItemLinks: null,
  dataItems: [],
  getValidDataItems: null,
  availableDimensions: {},
  onFetchDynamicDemoHotspots: null,
  actions: editorUtils.defaultDashboardEditorActionsProps
};
var ImageCardFormItems = function ImageCardFormItems(_ref) {
  var _cardConfig$content, _cardConfig$content2, _cardConfig$content3, _cardConfig$content4;
  var cardConfig = _ref.cardConfig,
    i18n = _ref.i18n,
    onChange = _ref.onChange,
    dataSeriesItemLinks = _ref.dataSeriesItemLinks,
    dataItems = _ref.dataItems,
    getValidDataItems = _ref.getValidDataItems,
    availableDimensions = _ref.availableDimensions,
    translateWithId = _ref.translateWithId,
    onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
    actions = _ref.actions;
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isHotspotModalShowing = _useState2[0],
    setIsHotspotModalShowing = _useState2[1];
  var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  var baseClassName = "".concat(iotPrefix, "--card-edit-form");
  var handleShowHotspotEditor = React.useCallback(function () {
    // if this image card doesn't have a hotspots field, set it
    if (!cardConfig.values) {
      onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        values: {
          hotspots: []
        }
      }));
    }
    setIsHotspotModalShowing(true);
  }, [cardConfig, onChange]);
  var handleCloseHotspotEditor = React.useCallback(function () {
    return setIsHotspotModalShowing(false);
  }, []);
  var handleSaveHotspotEditor = React.useCallback(function (cardConfigWithHotspots) {
    handleCloseHotspotEditor();
    onChange(cardConfigWithHotspots);
  }, [handleCloseHotspotEditor, onChange]);
  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isHotspotModalShowing ? /*#__PURE__*/React__default.default.createElement(HotspotEditorModal.default, {
    cardConfig: cardConfig,
    displayOption: (_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.displayOption,
    getValidDataItems: getValidDataItems,
    dataItems: dataItems,
    availableDimensions: availableDimensions,
    onSave: handleSaveHotspotEditor,
    onClose: handleCloseHotspotEditor,
    translateWithId: translateWithId,
    i18n: mergedI18n,
    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
    actions: actions
  }) : null, /*#__PURE__*/React__default.default.createElement(ContentFormItemTitle, {
    title: mergedI18n.image,
    tooltip: _objectSpread({
      tooltipText: mergedI18n.dataItemEditorSectionImageTooltipText
    }, dataSeriesItemLinks !== null && dataSeriesItemLinks !== void 0 && dataSeriesItemLinks.image ? {
      linkText: mergedI18n.dataItemEditorSectionTooltipLinkText,
      href: dataSeriesItemLinks.image
    } : {})
  }), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--form-section-image--input")
  }, /*#__PURE__*/React__default.default.createElement("label", {
    id: "".concat(mergedI18n.imageFile, "-label"),
    className: "".concat(prefix, "--label"),
    htmlFor: mergedI18n.imageFile
  }, mergedI18n.imageFile, /*#__PURE__*/React__default.default.createElement("input", {
    id: mergedI18n.imageFile,
    className: "".concat(prefix, "--text-input ").concat(prefix, "--text__input ").concat(prefix, "--text-input--light ").concat(baseClassName, "--form-section-image-input"),
    readOnly: true,
    value: ((_cardConfig$content2 = cardConfig.content) === null || _cardConfig$content2 === void 0 ? void 0 : _cardConfig$content2.id) || ''
  }), (_cardConfig$content3 = cardConfig.content) !== null && _cardConfig$content3 !== void 0 && _cardConfig$content3.id ? /*#__PURE__*/React__default.default.createElement(Button, {
    kind: "ghost",
    renderIcon: iconsReact.Close,
    size: "md",
    iconDescription: mergedI18n.close,
    className: "".concat(baseClassName, "--form-section ").concat(baseClassName, "--form-section-image-clear-button"),
    onClick: function onClick() {
      return (
        // close means clear the image info out of the JSON
        onChange(omit(cardConfig, 'content.id', 'content.src', 'content.alt', 'content.imgState'))
      );
    }
  }) : null), (_cardConfig$content4 = cardConfig.content) !== null && _cardConfig$content4 !== void 0 && _cardConfig$content4.id ? /*#__PURE__*/React__default.default.createElement(Button, {
    className: "".concat(baseClassName, "--form-section-image-btn"),
    size: "sm",
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.default.createElement(iconsReact.Scale, _extends__default.default({
        size: 32
      }, props));
    },
    onClick: handleShowHotspotEditor
  }, mergedI18n.editImage) : null));
};
ImageCardFormItems.propTypes = propTypes;
ImageCardFormItems.defaultProps = defaultProps;
ImageCardFormItems.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ImageCardFormItems",
  "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": {
              "id": {
                "name": "string",
                "required": false
              },
              "src": {
                "name": "string",
                "required": false
              },
              "zoomMax": {
                "name": "number",
                "required": false
              },
              "displayOption": {
                "name": "string",
                "required": false
              }
            },
            "required": false
          },
          "values": {
            "name": "custom",
            "raw": "ImageCardValuesPropType",
            "required": false
          },
          "interval": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  imageFile: 'Image file',\n  editImage: 'Edit image',\n  image: 'Image',\n  close: 'Close',\n  dataItemEditorSectionImageTooltipText:\n    'Add tooltips to hotspots on the image. Show metric or dimension values on the tooltips.',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "imageFile": {
            "name": "string",
            "required": false
          },
          "editImage": {
            "name": "string",
            "required": false
          },
          "image": {
            "name": "string",
            "required": false
          },
          "close": {
            "name": "string",
            "required": false
          },
          "dataItemEditorSectionImageTooltipText": {
            "name": "string",
            "required": false
          }
        }
      },
      "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": {
          "image": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "dataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "an array of dataItems to be included on each card",
      "type": {
        "name": "custom",
        "raw": "DataItemsPropTypes"
      },
      "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
    },
    "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
    },
    "onFetchDynamicDemoHotspots": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "call back to retrieve the dynamic demo hotspots, by default just returns one example dynamic hotspot, override to return true hotspots.\nSee HotspotEditorModal propTypes for params and details",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "actions": {
      "defaultValue": {
        "value": "defaultDashboardEditorActionsProps",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DashboardEditorActionsPropTypes"
      },
      "required": false
    },
    "onChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "translateWithId": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var ImageCardFormContent = ImageCardFormItems;

module.exports = ImageCardFormContent;
