"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var React = _interopRequireWildcard(require("react"));

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

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

var _Input = require("../../Atoms/Inputs/Input");

var _interpolation = require("../../Tools/interpolation");

var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "pe4dcp-0"
})(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: ", ";\n  box-sizing: border-box;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 1rem;\n    bottom: 1.15rem;\n    width: 0;\n    height: 0;\n    border-left: 0.4rem solid transparent;\n    border-right: 0.4rem solid transparent;\n    border-top: 0.4rem solid ", ";\n    pointer-events: none;\n  }\n"], (0, _interpolation.prop)('width'), (0, _interpolation.theme)('inputColor'));

var Select =
/*#__PURE__*/
_styledComponents.default.select.withConfig({
  componentId: "pe4dcp-1"
})(["\n  width: 100%;\n  height: 2.7rem;\n  padding: 0 2.4rem 0 1rem;\n  color: ", ";\n  background-color: ", ";\n  appearance: none;\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  border-width: 1px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: ", ";\n  cursor: pointer;\n  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  transition: box-shadow 0.25s ease-out;\n\n  &:disabled {\n    color: ", ";\n    border-color: ", ";\n    background: ", ";\n    cursor: not-allowed;\n  }\n\n  &:required:invalid {\n    color: ", ";\n  }\n\n  option[value=''][disabled] {\n    display: none;\n  }\n\n  option {\n    color: ", ";\n  }\n\n  &:active:not(:disabled),\n  &:focus:not(:disabled) {\n    box-shadow: 0 0 0 1px\n      ", ";\n  }\n"], (0, _interpolation.theme)('inputColor'), (0, _interpolation.theme)('inputBackgroundColor'), (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.prop)('weight'), (0, _interpolation.fontSize)('md'), function (props) {
  return props.italic === true ? 'italic' : 'normal';
}, function (props) {
  return props.error != null ? (0, _interpolation.theme)('dangerColor')(props) : (0, _interpolation.theme)('inputBorderColor')(props);
}, (0, _interpolation.theme)('inputBorderRadius'), (0, _interpolation.theme)('inputColor'), (0, _interpolation.theme)('inputBorderColor'), (0, _interpolation.theme)('inputBackgroundColorDisabled'), (0, _interpolation.theme)('inputPlaceholderColor'), (0, _interpolation.theme)('inputColor'), function (props) {
  return props.error != null ? 'transparent' : (0, _interpolation.theme)('inputActiveColor');
});

var SingleDropdown = function SingleDropdown(_ref) {
  var className = _ref.className,
      input = _ref.input,
      items = _ref.items,
      placeholder = _ref.placeholder,
      width = _ref.width,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "input", "items", "placeholder", "width"]);
  var hasLabel = rest.label != null;
  var hasError = rest.error != null;
  return React.createElement(Wrapper, {
    className: className,
    width: width
  }, (hasLabel || hasError) && React.createElement(_Input.InputLabel, {
    disabled: rest.disabled,
    error: hasError,
    name: rest.name
  }, "".concat(rest.label || '').concat(hasLabel && hasError ? ' - ' : '').concat(rest.error || '')), React.createElement(Select, (0, _objectSpread2.default)({
    defaultValue: placeholder != null ? '' : undefined
  }, input, rest), placeholder != null && React.createElement("option", {
    disabled: true,
    hidden: true,
    label: placeholder,
    value: ""
  }), 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.default.bool,
  italic: _propTypes.default.bool,
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    text: _propTypes.default.string,
    value: _propTypes.default.any
  })).isRequired,
  placeholder: _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,
  uppercase: false,
  width: '100%'
};
var _default = SingleDropdown;
exports.default = _default;