import _defineProperty from '@babel/runtime/helpers/defineProperty';
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.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, { useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Dropdown, IconButton } from '@carbon/react';
import { settings } from '../../../constants/Settings.js';
import { Erase } 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;
var propTypes = {
  /** List of data source objects. The same list is used for bothe the x and the y coordinate dropdown */
  dataSourceItems: PropTypes.arrayOf(PropTypes.shape({
    dataSourceId: PropTypes.string,
    label: PropTypes.string
  })).isRequired,
  id: PropTypes.string,
  /** totally clear the dynamic hotspots */
  onClear: PropTypes.func.isRequired,
  onXValueChange: PropTypes.func.isRequired,
  onYValueChange: PropTypes.func.isRequired,
  selectedSourceIdX: PropTypes.string,
  selectedSourceIdY: PropTypes.string,
  testId: PropTypes.string,
  i18n: PropTypes.shape({
    clearIconDescription: PropTypes.string,
    xCoordinateDropdownTitleText: PropTypes.string,
    xCoordinateDropdownLabelText: PropTypes.string,
    yCoordinateDropdownTitleText: PropTypes.string,
    yCoordinateDropdownLabelText: PropTypes.string
  }),
  translateWithId: PropTypes.func.isRequired
};
var defaultProps = {
  id: 'dynamic-hotspot-source-picker',
  selectedSourceIdX: undefined,
  selectedSourceIdY: undefined,
  testId: 'dynamic-hotspot-source-picker',
  i18n: {
    clearIconDescription: 'Clear coordinate sources',
    xCoordinateDropdownTitleText: 'X coordinate',
    xCoordinateDropdownLabelText: 'Select data item',
    yCoordinateDropdownTitleText: 'Y coordinate',
    yCoordinateDropdownLabelText: 'Select data item'
  }
};

/**
 * This component renders a form where the user can selection which dataSources to use
 * for the X and Y positions
 */
var DynamicHotspotSourcePicker = function DynamicHotspotSourcePicker(_ref) {
  var dataSourceItems = _ref.dataSourceItems,
    id = _ref.id,
    onClear = _ref.onClear,
    onXValueChange = _ref.onXValueChange,
    onYValueChange = _ref.onYValueChange,
    selectedSourceIdX = _ref.selectedSourceIdX,
    selectedSourceIdY = _ref.selectedSourceIdY,
    testId = _ref.testId,
    i18n = _ref.i18n,
    translateWithId = _ref.translateWithId;
  var classname = "".concat(iotPrefix, "--dynamic-hotspot-source-picker");
  var mergedI18n = useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var clearIconDescription = mergedI18n.clearIconDescription,
    xCoordinateDropdownTitleText = mergedI18n.xCoordinateDropdownTitleText,
    xCoordinateDropdownLabelText = mergedI18n.xCoordinateDropdownLabelText,
    yCoordinateDropdownTitleText = mergedI18n.yCoordinateDropdownTitleText,
    yCoordinateDropdownLabelText = mergedI18n.yCoordinateDropdownLabelText;
  return /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: classname
  }, /*#__PURE__*/React__default.createElement(Dropdown, {
    key: "".concat(id, "-x-coordinate-dropdown-").concat(selectedSourceIdX),
    "data-testid": "".concat(testId, "-x-coordinate-dropdown"),
    selectedItem: dataSourceItems.find(function (item) {
      return item.dataSourceId === selectedSourceIdX;
    }),
    id: "".concat(id, "-x-coordinate-dropdown"),
    titleText: xCoordinateDropdownTitleText,
    label: xCoordinateDropdownLabelText,
    items: dataSourceItems,
    itemToString: function itemToString(item) {
      return item.label;
    },
    translateWithId: translateWithId,
    onChange: function onChange(change) {
      onXValueChange(change.selectedItem.dataSourceId);
    }
  }), /*#__PURE__*/React__default.createElement(Dropdown, {
    key: "".concat(id, "-y-coordinate-dropdown-").concat(selectedSourceIdY),
    "data-testid": "".concat(testId, "-y-coordinate-dropdown"),
    selectedItem: dataSourceItems.find(function (item) {
      return item.dataSourceId === selectedSourceIdY;
    }),
    id: "".concat(id, "-y-coordinate-dropdown"),
    titleText: yCoordinateDropdownTitleText,
    label: yCoordinateDropdownLabelText,
    items: dataSourceItems,
    translateWithId: translateWithId,
    itemToString: function itemToString(item) {
      return item.label;
    },
    onChange: function onChange(change) {
      onYValueChange(change.selectedItem.dataSourceId);
    }
  }), /*#__PURE__*/React__default.createElement(IconButton, {
    "data-testid": "".concat(testId, "-clear-dropdown"),
    className: classnames("".concat(classname, "__clear-button"), _defineProperty({}, "".concat(classname, "__clear-button--invisible"), !selectedSourceIdX || !selectedSourceIdY)),
    kind: "ghost",
    size: "md",
    renderIcon: Erase,
    label: clearIconDescription,
    autoAlign: true,
    onClick: onClear
  }));
};
DynamicHotspotSourcePicker.propTypes = propTypes;
DynamicHotspotSourcePicker.defaultProps = defaultProps;
DynamicHotspotSourcePicker.__docgenInfo = {
  "description": "This component renders a form where the user can selection which dataSources to use\nfor the X and Y positions",
  "methods": [],
  "displayName": "DynamicHotspotSourcePicker",
  "props": {
    "id": {
      "defaultValue": {
        "value": "'dynamic-hotspot-source-picker'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "selectedSourceIdX": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "selectedSourceIdY": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'dynamic-hotspot-source-picker'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  clearIconDescription: 'Clear coordinate sources',\n  xCoordinateDropdownTitleText: 'X coordinate',\n  xCoordinateDropdownLabelText: 'Select data item',\n  yCoordinateDropdownTitleText: 'Y coordinate',\n  yCoordinateDropdownLabelText: 'Select data item',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "clearIconDescription": {
            "name": "string",
            "required": false
          },
          "xCoordinateDropdownTitleText": {
            "name": "string",
            "required": false
          },
          "xCoordinateDropdownLabelText": {
            "name": "string",
            "required": false
          },
          "yCoordinateDropdownTitleText": {
            "name": "string",
            "required": false
          },
          "yCoordinateDropdownLabelText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "dataSourceItems": {
      "description": "List of data source objects. The same list is used for bothe the x and the y coordinate dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "dataSourceId": {
              "name": "string",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "onClear": {
      "description": "totally clear the dynamic hotspots",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onXValueChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onYValueChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "translateWithId": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var DynamicHotspotSourcePicker$1 = DynamicHotspotSourcePicker;

export { DynamicHotspotSourcePicker$1 as default };
