"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

//  strict
var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "pe4dcp-0"
})(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: ", ";\n  height: 2.7rem;\n  box-sizing: border-box;\n  background-color: ", ";\n  background-image: none;\n  outline-width: 0;\n  user-select: text;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 1rem;\n    top: 50%;\n    margin-top: -3px;\n    margin-left: 5px;\n    text-align: center;\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid ", ";\n    pointer-events: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], function (props) {
  return props.width;
}, function (props) {
  return props.theme.inputBackgroundColor;
}, function (props) {
  return props.theme.inputColor;
}, function (props) {
  return props.inline ? props.theme.inputBackgroundColorFocus : 'inherit';
});

var Select =
/*#__PURE__*/
_styledComponents.default.select.withConfig({
  componentId: "pe4dcp-1"
})(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding: 0 2.4rem 0 1.4rem;\n  color: ", ";\n  background-color: transparent;\n  appearance: none;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  font-style: ", ";\n  border-width: 1px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  outline: none;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"], function (props) {
  return props.theme.inputColor;
}, function (props) {
  return props.theme.fontPrimary;
}, function (props) {
  return props.size;
}, function (props) {
  return props.weight;
}, function (props) {
  return props.uppercase ? 'uppercase' : props.capitalize ? 'capitalize' : 'none';
}, function (props) {
  return props.italic ? 'italic' : 'normal';
}, function (props) {
  return props.inline ? 'transparent' : props.theme.inputBorderColor;
}, function (props) {
  return props.theme.inputBorderRadius;
}, function (props) {
  return props.theme.inputBorderRadius;
}, function (props) {
  return props.theme.inputBorderColor;
});

var SingleDropdown = function SingleDropdown(_ref) {
  var className = _ref.className,
      inline = _ref.inline,
      items = _ref.items,
      width = _ref.width,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "inline", "items", "width"]);
  return _react.default.createElement(Wrapper, {
    className: className,
    inline: inline,
    width: width
  }, _react.default.createElement(Select, (0, _extends2.default)({
    inline: inline
  }, rest), items.map(function (item) {
    return _react.default.createElement("option", {
      key: item.value,
      value: item.value
    }, item.text);
  })));
};

SingleDropdown.propTypes = process.env.NODE_ENV !== "production" ? {
  capitalize: _propTypes.default.bool,
  inline: _propTypes.default.bool,
  italic: _propTypes.default.bool,
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    text: _propTypes.default.string,
    value: _propTypes.default.any
  })).isRequired,
  onChange: _propTypes.default.func.isRequired,
  size: _propTypes.default.string,
  uppercase: _propTypes.default.bool,
  value: _propTypes.default.any,
  weight: _propTypes.default.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900]),
  width: _propTypes.default.string.isRequired
} : {};
SingleDropdown.defaultProps = {
  capitalize: false,
  italic: false,
  size: '1rem',
  uppercase: false,
  width: '100%'
};
var _default = SingleDropdown;
exports.default = _default;