import React from 'react';
import { cx } from "../../../../lib/theming/Emotion";
import { ThemeContext } from "../../../../lib/theming/ThemeContext";
import { styles } from "../../Input.styles";
import { needsPolyfillPlaceholder } from "../../../../lib/needsPolyfillPlaceholder";
import { InputLayoutContext } from "../InputLayoutContext";
export var PolyfillPlaceholder = function PolyfillPlaceholder(_ref) {
  var placeholder = _ref.children,
    align = _ref.align,
    value = _ref.value,
    defaultValue = _ref.defaultValue,
    isMaskVisible = _ref.isMaskVisible;
  var theme = React.useContext(ThemeContext);
  var _React$useContext = React.useContext(InputLayoutContext),
    focused = _React$useContext.focused,
    disabled = _React$useContext.disabled;
  var _placeholder = null;
  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {
    var _cx;
    _placeholder = /*#__PURE__*/
    React.createElement("div", {
      className: cx(styles.placeholder(theme), (_cx = {}, _cx[styles.placeholderDisabled(theme)] = disabled, _cx[styles.placeholderFocus(theme)] = focused, _cx)),
      style: {
        textAlign: align || 'inherit'
      }
    }, placeholder);
  }
  return _placeholder;
};