'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.array.find.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 colors$1 = require('@carbon/colors');
var Settings = require('../../../../../constants/Settings.js');
var ColorDropdown = require('../../../../ColorDropdown/ColorDropdown.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.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({
      hideMinimap: PropTypes__default.default.bool,
      hideHotspots: PropTypes__default.default.bool,
      hideZoomControls: PropTypes__default.default.bool,
      id: PropTypes__default.default.string,
      displayOption: PropTypes__default.default.string,
      background: PropTypes__default.default.string
    }),
    interval: PropTypes__default.default.string
  }),
  /** Callback function when form data changes */
  onChange: PropTypes__default.default.func.isRequired,
  i18n: PropTypes__default.default.shape({
    displayOptions: PropTypes__default.default.string,
    colorTitleText: PropTypes__default.default.string,
    hideMap: PropTypes__default.default.string,
    hideZoom: PropTypes__default.default.string,
    zoomLevel: PropTypes__default.default.string,
    fit: PropTypes__default.default.string,
    stretch: PropTypes__default.default.string,
    selectAColor: PropTypes__default.default.string
  }),
  /** Callback function to call to translate common elements */
  translateWithId: PropTypes__default.default.func.isRequired
};
var defaultProps = {
  cardConfig: {},
  i18n: {
    displayOptions: 'Image display options',
    colorTitleText: 'Background color',
    hideMap: 'Hide mini map',
    hideZoom: 'Hide zoom controls',
    zoomLevel: 'Max zoom level',
    fit: 'Fit',
    stretch: 'Stretch',
    selectAColor: 'Select a color'
  }
};
var colors = [{
  carbonColor: colors$1.gray10,
  name: 'gray10'
}, {
  carbonColor: colors$1.gray80,
  name: 'gray80'
}, {
  carbonColor: colors$1.white,
  name: 'white'
}];
var ImageCardFormSettings = function ImageCardFormSettings(_ref) {
  var _cardConfig$content, _cardConfig$content3, _cardConfig$content4;
  var cardConfig = _ref.cardConfig,
    _onChange = _ref.onChange,
    i18n = _ref.i18n,
    translateWithId = _ref.translateWithId;
  var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  // Hiding until the UX for this form item is figured out.
  // const [zoom, setZoom] = useState(cardConfig.content.zoomLevel || 0);

  var baseClassName = "".concat(iotPrefix, "--card-edit-form");

  // Hiding until the UX for this form item is figured out.
  // const handleZoomChange = ({ value }) => {
  //   onChange({
  //     ...cardConfig,
  //     content: { ...cardConfig.content, zoomMax: value },
  //   });
  //   setZoom(value);
  // };

  return /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, " ").concat(baseClassName, "--form-section-image")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    legendText: mergedI18n.displayOptions
  }, /*#__PURE__*/React__default.default.createElement(react.RadioButtonGroup, {
    name: "".concat(baseClassName, "--input-radios"),
    onChange: function onChange(evt) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        content: _objectSpread(_objectSpread({}, cardConfig.content), {}, {
          displayOption: evt
        })
      }));
    },
    orientation: "vertical",
    legend: mergedI18n.displayOptions,
    labelPosition: "right",
    valueSelected: (_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.displayOption
  }, /*#__PURE__*/React__default.default.createElement(react.RadioButton, {
    "data-testid": "".concat(baseClassName, "--input-radio1"),
    value: "contain",
    id: "".concat(baseClassName, "--input-radio-1"),
    labelText: mergedI18n.fit
  }), /*#__PURE__*/React__default.default.createElement(react.RadioButton, {
    "data-testid": "".concat(baseClassName, "--input-radio3"),
    value: "fill",
    id: "".concat(baseClassName, "--input-radio-3"),
    labelText: mergedI18n.stretch
  })))), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.default.createElement(ColorDropdown, {
    "data-testid": "".concat(baseClassName, "--input-color-dropdown"),
    titleText: mergedI18n.colorTitleText,
    light: true,
    title: mergedI18n.selectAColor,
    label: mergedI18n.selectAColor,
    colors: colors,
    id: "".concat(baseClassName, "--input-color"),
    selectedColor: colors.find(function (color) {
      var _cardConfig$content2;
      return color.carbonColor === ((_cardConfig$content2 = cardConfig.content) === null || _cardConfig$content2 === void 0 ? void 0 : _cardConfig$content2.background);
    }),
    translateWithId: translateWithId,
    onChange: function onChange(evt) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        content: _objectSpread(_objectSpread({}, cardConfig.content), {}, {
          background: evt.color.carbonColor
        })
      }));
    }
  })), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input--toggle-field")
  }, /*#__PURE__*/React__default.default.createElement("span", null, mergedI18n.hideMap), /*#__PURE__*/React__default.default.createElement(react.Toggle, {
    size: "sm",
    "data-testid": "".concat(baseClassName, "--input-toggle1"),
    id: "".concat(baseClassName, "--input-toggle-1"),
    "aria-label": mergedI18n.hideMap,
    labelA: "",
    labelB: "",
    toggled: (_cardConfig$content3 = cardConfig.content) === null || _cardConfig$content3 === void 0 ? void 0 : _cardConfig$content3.hideMinimap,
    onToggle: function onToggle(bool) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        content: _objectSpread(_objectSpread({}, cardConfig.content), {}, {
          hideMinimap: bool
        })
      }));
    }
  }))), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--input--toggle-field")
  }, /*#__PURE__*/React__default.default.createElement("span", null, mergedI18n.hideZoom), /*#__PURE__*/React__default.default.createElement(react.Toggle, {
    size: "sm",
    "data-testid": "".concat(baseClassName, "--input-toggle2"),
    id: "".concat(baseClassName, "--input-toggle-2"),
    "aria-label": mergedI18n.hideZoom,
    labelA: "",
    labelB: "",
    toggled: (_cardConfig$content4 = cardConfig.content) === null || _cardConfig$content4 === void 0 ? void 0 : _cardConfig$content4.hideZoomControls,
    onToggle: function onToggle(bool) {
      return _onChange(_objectSpread(_objectSpread({}, cardConfig), {}, {
        content: _objectSpread(_objectSpread({}, cardConfig.content), {}, {
          hideZoomControls: bool
        })
      }));
    }
  }))));
};
ImageCardFormSettings.propTypes = propTypes;
ImageCardFormSettings.defaultProps = defaultProps;
ImageCardFormSettings.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ImageCardFormSettings",
  "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
          },
          "content": {
            "name": "shape",
            "value": {
              "hideMinimap": {
                "name": "bool",
                "required": false
              },
              "hideHotspots": {
                "name": "bool",
                "required": false
              },
              "hideZoomControls": {
                "name": "bool",
                "required": false
              },
              "id": {
                "name": "string",
                "required": false
              },
              "displayOption": {
                "name": "string",
                "required": false
              },
              "background": {
                "name": "string",
                "required": false
              }
            },
            "required": false
          },
          "interval": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  displayOptions: 'Image display options',\n  colorTitleText: 'Background color',\n  hideMap: 'Hide mini map',\n  hideZoom: 'Hide zoom controls',\n  zoomLevel: 'Max zoom level',\n  fit: 'Fit',\n  stretch: 'Stretch',\n  selectAColor: 'Select a color',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "displayOptions": {
            "name": "string",
            "required": false
          },
          "colorTitleText": {
            "name": "string",
            "required": false
          },
          "hideMap": {
            "name": "string",
            "required": false
          },
          "hideZoom": {
            "name": "string",
            "required": false
          },
          "zoomLevel": {
            "name": "string",
            "required": false
          },
          "fit": {
            "name": "string",
            "required": false
          },
          "stretch": {
            "name": "string",
            "required": false
          },
          "selectAColor": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "onChange": {
      "description": "Callback function when form data changes",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "translateWithId": {
      "description": "Callback function to call to translate common elements",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var ImageCardFormSettings$1 = ImageCardFormSettings;

module.exports = ImageCardFormSettings$1;
