'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.function.name.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var colors = require('@carbon/colors');
var warning = require('warning');
var Settings = require('../../constants/Settings.js');
var deprecate = require('../../internal/deprecate.js');

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

var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var warning__default = /*#__PURE__*/_interopDefault(warning);

var iotPrefix = Settings.settings.iotPrefix;
var colorPropType = PropTypes__default.default.shape({
  carbonColor: PropTypes__default.default.string,
  name: PropTypes__default.default.string
});
var propTypes = {
  /** Array of colors to be shown */
  colors: PropTypes__default.default.arrayOf(colorPropType),
  /** True disables the control */
  disabled: PropTypes__default.default.bool,
  /** The label of the Dropdown, defaults to 'Select a color' */
  label: PropTypes__default.default.string,
  /** True if the dropdown should hide the color names that display next to the color box */
  hideLabels: PropTypes__default.default.bool,
  /** The title of the Dropdown, defaults to 'Color' */
  titleText: PropTypes__default.default.string,
  /** Required Id string */
  id: PropTypes__default.default.string.isRequired,
  /** True if the light theme is to be used, defaults to false */
  light: PropTypes__default.default.bool,
  /** Callback for when any of the Dropdown color value changes */
  onChange: PropTypes__default.default.func.isRequired,
  /** Callback to translate common strings */
  translateWithId: PropTypes__default.default.func,
  /** The selected color, use to set initial color */
  selectedColor: colorPropType,
  // TODO: remove deprecated testID in v3.
  // eslint-disable-next-line react/require-default-props
  testID: deprecate(PropTypes__default.default.string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
  /** Id used if needed for testing */
  testId: PropTypes__default.default.string
};
var defaultProps = {
  colors: [{
    carbonColor: colors.purple70,
    name: 'purple70'
  }, {
    carbonColor: colors.cyan50,
    name: 'cyan50'
  }, {
    carbonColor: colors.teal70,
    name: 'teal70'
  }, {
    carbonColor: colors.magenta70,
    name: 'magenta70'
  }, {
    carbonColor: colors.red50,
    name: 'red50'
  }, {
    carbonColor: colors.red90,
    name: 'red90'
  }, {
    carbonColor: colors.green60,
    name: 'green60'
  }, {
    carbonColor: colors.blue80,
    name: 'blue80'
  }, {
    carbonColor: colors.magenta50,
    name: 'magenta50'
  }, {
    carbonColor: colors.purple50,
    name: 'purple50'
  }, {
    carbonColor: colors.teal50,
    name: 'teal50'
  }, {
    carbonColor: colors.cyan90,
    name: 'cyan90'
  }],
  disabled: false,
  label: 'Select a color',
  hideLabels: false,
  light: false,
  selectedColor: undefined,
  testId: 'color-dropdown',
  titleText: 'Color',
  translateWithId: undefined
};
var ColorDropdown = function ColorDropdown(_ref) {
  var colors = _ref.colors,
    disabled = _ref.disabled,
    id = _ref.id,
    label = _ref.label,
    hideLabels = _ref.hideLabels,
    light = _ref.light,
    _onChange = _ref.onChange,
    selectedColorProp = _ref.selectedColor,
    titleText = _ref.titleText,
    testID = _ref.testID,
    testId = _ref.testId,
    translateWithId = _ref.translateWithId;
  React__default.default.useEffect(function () {
    {
      warning__default.default(false, 'The `ColorDropdown` is an experimental component and could be lacking unit test and documentation. Be aware that minor version bumps could introduce breaking changes. For the reasons listed above use of this component in production is highly discouraged') ;
    }
  }, []);
  var _useState = React.useState(selectedColorProp),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    selectedColor = _useState2[0],
    setSelectedColor = _useState2[1];
  var renderColorItem = function renderColorItem(item) {
    return /*#__PURE__*/React__default.default.createElement("div", {
      title: "".concat(item.name),
      className: "".concat(iotPrefix, "--color-dropdown__item")
    }, /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(iotPrefix, "--color-dropdown__item-border")
    }, /*#__PURE__*/React__default.default.createElement("div", {
      title: "".concat(item.carbonColor),
      className: "".concat(iotPrefix, "--color-dropdown__color-sample"),
      style: {
        backgroundColor: item.carbonColor
      }
    }), !hideLabels && /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(iotPrefix, "--color-dropdown__color-name")
    }, item.name)));
  };
  return /*#__PURE__*/React__default.default.createElement(react.Dropdown, {
    className: "".concat(iotPrefix, "--color-dropdown"),
    id: id,
    itemToElement: renderColorItem,
    itemToString: function itemToString(item) {
      return item.name;
    },
    items: colors,
    label: label,
    light: light,
    title: label,
    translateWithId: translateWithId,
    onChange: function onChange(_ref2) {
      var selectedItem = _ref2.selectedItem;
      setSelectedColor(selectedItem);
      _onChange({
        color: selectedItem
      });
    },
    selectedItem: selectedColor,
    renderSelectedItem: renderColorItem,
    titleText: titleText,
    type: "default",
    "data-testid": testID || testId,
    disabled: disabled,
    autoAlign: true
  });
};
ColorDropdown.propTypes = propTypes;
ColorDropdown.defaultProps = defaultProps;
ColorDropdown.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ColorDropdown",
  "props": {
    "colors": {
      "defaultValue": {
        "value": "[\n  { carbonColor: purple70, name: 'purple70' },\n  { carbonColor: cyan50, name: 'cyan50' },\n  { carbonColor: teal70, name: 'teal70' },\n  { carbonColor: magenta70, name: 'magenta70' },\n  { carbonColor: red50, name: 'red50' },\n  { carbonColor: red90, name: 'red90' },\n  { carbonColor: green60, name: 'green60' },\n  { carbonColor: blue80, name: 'blue80' },\n  { carbonColor: magenta50, name: 'magenta50' },\n  { carbonColor: purple50, name: 'purple50' },\n  { carbonColor: teal50, name: 'teal50' },\n  { carbonColor: cyan90, name: 'cyan90' },\n]",
        "computed": false
      },
      "description": "Array of colors to be shown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "colorPropType"
        }
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "True disables the control",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "label": {
      "defaultValue": {
        "value": "'Select a color'",
        "computed": false
      },
      "description": "The label of the Dropdown, defaults to 'Select a color'",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hideLabels": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "True if the dropdown should hide the color names that display next to the color box",
      "type": {
        "name": "bool"
      },
      "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
    },
    "selectedColor": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The selected color, use to set initial color",
      "type": {
        "name": "custom",
        "raw": "colorPropType"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'color-dropdown'",
        "computed": false
      },
      "description": "Id used if needed for testing",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "titleText": {
      "defaultValue": {
        "value": "'Color'",
        "computed": false
      },
      "description": "The title of the Dropdown, defaults to 'Color'",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "translateWithId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Callback to translate common strings",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "id": {
      "description": "Required Id string",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "onChange": {
      "description": "Callback for when any of the Dropdown color 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 ColorDropdown$1 = ColorDropdown;

module.exports = ColorDropdown$1;
