import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import 'core-js/modules/es.function.name.js';
import React__default, { useState } from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from '@carbon/react';
import { validThresholdIcons } from '../DashboardEditor/editorUtils.js';
import { settings } from '../../constants/Settings.js';
import deprecate from '../../internal/deprecate.js';
import { CarbonIconPropType } from '../../constants/SharedPropTypes.js';

var iotPrefix = settings.iotPrefix;
var iconProptype = PropTypes.shape({
  carbonIcon: CarbonIconPropType,
  name: PropTypes.string
});
var propTypes = {
  /** Array of icons to be shown */
  icons: PropTypes.arrayOf(iconProptype),
  /** The title of the Dropdown, defaults to 'Icon' */
  titleText: PropTypes.string,
  /** Required Id string */
  id: PropTypes.string.isRequired,
  /** True if the light theme is to be used, defaults to false */
  light: PropTypes.bool,
  /** Callback for when any of the Dropdown icon value changes */
  onChange: PropTypes.func.isRequired,
  /** Callback to translate common icons */
  translateWithId: PropTypes.func,
  /** The selected icon, use to set initial icon */
  selectedIcon: iconProptype,
  // TODO: remove deprecated 'testID' in v3
  // eslint-disable-next-line react/require-default-props
  testID: deprecate(PropTypes.string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
  /** Id used if needed for testing */
  testId: PropTypes.string
};
var defaultProps = {
  icons: validThresholdIcons,
  light: false,
  selectedIcon: undefined,
  testId: undefined,
  titleText: '',
  translateWithId: undefined
};
var SimpleIconDropdown = function SimpleIconDropdown(_ref) {
  var icons = _ref.icons,
    id = _ref.id,
    light = _ref.light,
    _onChange = _ref.onChange,
    selectedIconProp = _ref.selectedIcon,
    titleText = _ref.titleText,
    testID = _ref.testID,
    testId = _ref.testId,
    translateWithId = _ref.translateWithId;
  var _useState = useState(selectedIconProp),
    _useState2 = _slicedToArray(_useState, 2),
    selectedIcon = _useState2[0],
    setSelectedIcon = _useState2[1];
  var renderIconItem = function renderIconItem(item) {
    return /*#__PURE__*/React__default.createElement("div", {
      title: item.name,
      style: {
        color: item.color || 'unset'
      },
      className: "".concat(iotPrefix, "--icon-dropdown__item")
    }, /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--icon-dropdown__item-border")
    }, item.carbonIcon));
  };
  return /*#__PURE__*/React__default.createElement(Dropdown, {
    className: "".concat(iotPrefix, "--icon-dropdown"),
    id: id,
    itemToElement: renderIconItem,
    renderSelectedItem: renderIconItem,
    itemToString: function itemToString(item) {
      return item.name;
    },
    items: icons,
    label: "",
    light: light,
    onChange: function onChange(_ref2) {
      var selectedItem = _ref2.selectedItem;
      setSelectedIcon(selectedItem);
      _onChange({
        icon: selectedItem
      });
    },
    translateWithId: translateWithId,
    selectedItem: selectedIcon || icons[0],
    titleText: titleText,
    type: "default"
    // TODO: remove deprecated 'testID' in v3
    ,
    "data-testid": testID || testId,
    autoAlign: true
  });
};
SimpleIconDropdown.propTypes = propTypes;
SimpleIconDropdown.defaultProps = defaultProps;
SimpleIconDropdown.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SimpleIconDropdown",
  "props": {
    "icons": {
      "defaultValue": {
        "value": "validThresholdIcons",
        "computed": true
      },
      "description": "Array of icons to be shown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "iconProptype"
        }
      },
      "required": false
    },
    "light": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "True if the light theme is to be used, defaults to false",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "selectedIcon": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The selected icon, use to set initial icon",
      "type": {
        "name": "custom",
        "raw": "iconProptype"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Id used if needed for testing",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "titleText": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "The title of the Dropdown, defaults to 'Icon'",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "translateWithId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Callback to translate common icons",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "id": {
      "description": "Required Id string",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "onChange": {
      "description": "Callback for when any of the Dropdown icon value changes",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "testID": {
      "description": "",
      "type": {
        "name": "custom",
        "raw": "deprecate(\n  PropTypes.string,\n  `The 'testID' prop has been deprecated. Please use 'testId' instead.`\n)"
      },
      "required": false
    }
  }
};
var SimpleIconDropdown$1 = SimpleIconDropdown;

export { SimpleIconDropdown$1 as default };
