"use strict";

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

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

var _forms = require("@rebass/forms");

var _ramda = require("ramda");

var _ramdaExtension = require("ramda-extension");

var _useBlockingEffect = _interopRequireDefault(require("../hooks/useBlockingEffect"));

var _SuperField = require("../SuperField");

var _Box = _interopRequireDefault(require("../Box"));

var getBorderColor = function getBorderColor(_ref) {
  var hasError = _ref.hasError,
      disabled = _ref.disabled,
      readOnly = _ref.readOnly;

  if (hasError) {
    return 'danger';
  } else if (disabled || readOnly) {
    return 'lightGray';
  } else {
    return 'secondary';
  }
}; // TODO: items -> children - Option/OptionGroup


var Select = (0, _react.forwardRef)(function (props, ref) {
  var value = props.value,
      onChange = props.onChange,
      _props$onFocus = props.onFocus,
      onFocusProp = _props$onFocus === void 0 ? _ramdaExtension.noop : _props$onFocus,
      _props$onBlur = props.onBlur,
      onBlurProp = _props$onBlur === void 0 ? _ramdaExtension.noop : _props$onBlur,
      placeholder = props.placeholder,
      disabled = props.disabled,
      readOnly = props.readOnly,
      _props$items = props.items,
      items = _props$items === void 0 ? [] : _props$items,
      _props$getLabel = props.getLabel,
      getLabel = _props$getLabel === void 0 ? (0, _ramda.prop)('label') : _props$getLabel,
      _props$getValue = props.getValue,
      getValue = _props$getValue === void 0 ? (0, _ramda.prop)('value') : _props$getValue,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["value", "onChange", "onFocus", "onBlur", "placeholder", "disabled", "readOnly", "items", "getLabel", "getValue"]);

  var _useSuperFieldContext = (0, _SuperField.useSuperFieldContext)(),
      id = _useSuperFieldContext.id,
      isLabelShrank = _useSuperFieldContext.isLabelShrank,
      hasError = _useSuperFieldContext.hasError,
      onFill = _useSuperFieldContext.onFill,
      onEmpty = _useSuperFieldContext.onEmpty,
      onFocus = _useSuperFieldContext.onFocus,
      onBlur = _useSuperFieldContext.onBlur;

  var checkDirty = (0, _react.useCallback)(function (value) {
    if ((0, _SuperField.isInputValueEmpty)(value)) {
      onEmpty();
    } else {
      onFill();
    }
  }, [onEmpty, onFill]);
  (0, _useBlockingEffect.default)(function () {
    checkDirty(value);
  }, [checkDirty, value]);
  var handleChange = disabled ? _ramdaExtension.noop : onChange;

  var handleFocus = function handleFocus(event) {
    if (disabled) {
      return;
    }

    onFocus();
    return onFocusProp(event);
  };

  var handleBlur = function handleBlur(event) {
    if (disabled) {
      return;
    }

    onBlur();
    return onBlurProp(event);
  };

  var getItems = (0, _ramda.o)(placeholder ? (0, _ramda.prepend)(
  /*#__PURE__*/
  _react.default.createElement("option", {
    key: "",
    disabled: true,
    value: ""
  }, placeholder)) : _ramda.identity, (0, _ramda.map)(function (item) {
    return (
      /*#__PURE__*/
      _react.default.createElement("option", {
        key: getValue(item),
        value: getValue(item)
      }, getLabel(item))
    );
  }));
  return (
    /*#__PURE__*/
    _react.default.createElement(_Box.default, {
      sx: {
        position: 'relative',
        '&:before': {
          content: "\"\xA0\"",
          display: 'block',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          borderBottomStyle: 'solid',
          borderBottomWidth: '1px',
          borderBottomColor: 'lightGray',
          pointerEvents: 'none'
        },
        '&:hover:before': {
          borderBottomColor: disabled ? 'lightGray' : 'gray'
        },
        '&:after': {
          content: "\"\xA0\"",
          display: 'block',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          borderBottomStyle: 'solid',
          borderBottomWidth: disabled || readOnly ? '1px' : '2px',
          borderBottomColor: getBorderColor(props),
          pointerEvents: 'none',
          transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
          transform: !isLabelShrank && !hasError ? 'scaleX(0)' : ''
        }
      }
    },
    /*#__PURE__*/
    _react.default.createElement(_forms.Select, (0, _extends2.default)({
      sx: {
        color: 'inherit',
        border: 'none',
        fontSize: [2, 2, 2, 4],
        WebkitTapHighlightColor: 'transparent',
        // FF
        '&:invalid': {
          boxShadow: 'none'
        },
        '&:focus': {
          outline: 0
        },
        width: '100%'
      },
      px: 0,
      id: id,
      value: value,
      onChange: handleChange,
      onFocus: handleFocus,
      onBlur: handleBlur,
      disabled: disabled,
      readOnly: readOnly,
      ref: ref
    }, rest), getItems(items)))
  );
});
Select.displayName = 'Select';
process.env.NODE_ENV !== "production" ? Select.propTypes = {
  disabled: _propTypes.default.bool,
  getLabel: _propTypes.default.func,
  getValue: _propTypes.default.func,
  items: _propTypes.default.array,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  placeholder: _propTypes.default.string,
  readOnly: _propTypes.default.bool,
  value: _propTypes.default.any
} : void 0;
var _default = Select;
exports.default = _default;