import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
var Wrapper =
/*#__PURE__*/
styled.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__*/
styled.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 = _objectWithoutProperties(_ref, ["className", "inline", "items", "width"]);

  return React.createElement(Wrapper, {
    className: className,
    inline: inline,
    width: width
  }, React.createElement(Select, _extends({
    inline: inline
  }, rest), items.map(function (item) {
    return React.createElement("option", {
      key: item.value,
      value: item.value
    }, item.text);
  })));
};

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