import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { forwardRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { identity, map, o, prepend, prop } from 'ramda';
import { noop } from 'ramda-extension';
import useBlockingEffect from '../hooks/useBlockingEffect';
import { isInputValueEmpty, useSuperFieldContext } from '../SuperField';
import TransparentSelect from '../TransparentSelect';
import Box from '../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 = /*#__PURE__*/forwardRef(function (props, ref) {
  var value = props.value,
      onChange = props.onChange,
      _props$onFocus = props.onFocus,
      onFocusProp = _props$onFocus === void 0 ? noop : _props$onFocus,
      _props$onBlur = props.onBlur,
      onBlurProp = _props$onBlur === void 0 ? 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 ? prop('label') : _props$getLabel,
      _props$getValue = props.getValue,
      getValue = _props$getValue === void 0 ? prop('value') : _props$getValue,
      rest = _objectWithoutProperties(props, ["value", "onChange", "onFocus", "onBlur", "placeholder", "disabled", "readOnly", "items", "getLabel", "getValue"]);

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

  var checkDirty = useCallback(function (value) {
    if (isInputValueEmpty(value)) {
      onEmpty();
    } else {
      onFill();
    }
  }, [onEmpty, onFill]);
  useBlockingEffect(function () {
    checkDirty(value);
  }, [checkDirty, value]);
  var handleChange = disabled ? 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 = o(placeholder ? prepend( /*#__PURE__*/React.createElement("option", {
    key: "",
    disabled: true,
    value: ""
  }, placeholder)) : identity, map(function (item) {
    return /*#__PURE__*/React.createElement("option", {
      key: getValue(item),
      value: getValue(item)
    }, getLabel(item));
  }));
  return /*#__PURE__*/React.createElement(Box, {
    sx: {
      position: 'relative',
      '&:before': {
        content: "\"\xA0\"",
        display: 'block',
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        borderBottomStyle: 'solid',
        borderBottomWidth: '1px',
        borderBottomColor: 'muted',
        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.createElement(TransparentSelect, _extends({
    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.bool,
  getLabel: PropTypes.func,
  getValue: PropTypes.func,
  items: PropTypes.array,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  placeholder: PropTypes.string,
  readOnly: PropTypes.bool,
  value: PropTypes.any
} : void 0;
export default Select;