function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-ui/styles';
import { styles } from './Input.styled';
import { InputPropTypes } from './Input.type';
import { ChromeClose as ChromeCloseIcon } from '@fluent-ui/icons';
import Transition from '../Transition';
export const name = 'Input';
const useStyles = createUseStyles(styles, {
  name
});
const Input = React.forwardRef((props, ref) => {
  const {
    className: classNameProp,
    style,
    value,
    onChange,
    placeholder,
    disabled,
    cleared,
    password,
    error,
    ...rest
  } = props;
  const clearedRef = React.useRef(null);
  const [clearedHeight, setClearedHeight] = React.useState(0);
  React.useEffect(() => {
    if (clearedRef && clearedRef.current) {
      setClearedHeight(clearedRef.current.offsetHeight);
    }
  }, []);

  function handleChange(e) {
    onChange && onChange(e ? e.target.value : '');
  }

  function handleClear(e) {
    e.preventDefault();
    e.stopPropagation();
    handleChange(null);
  }

  const classes = useStyles(props);
  const className = classNames(classes.root, {
    [classes.error]: error
  }, classNameProp);
  const clearedInputStyle = React.useMemo(() => cleared ? {
    paddingRight: clearedHeight
  } : {}, [cleared, clearedHeight]);
  return React.createElement("div", {
    className: classes.wrapper,
    style: style
  }, React.createElement("input", _extends({
    className: className,
    ref: ref,
    value: value,
    onChange: handleChange,
    placeholder: placeholder,
    disabled: disabled,
    type: password ? 'password' : 'text',
    style: clearedInputStyle
  }, rest)), cleared && React.createElement(Transition, {
    visible: !!value,
    wrapper: false
  }, React.createElement("span", {
    className: classes.clearedIcon,
    onClick: handleClear,
    ref: clearedRef,
    style: {
      width: clearedHeight
    }
  }, React.createElement(ChromeCloseIcon, null))));
});
Input.displayName = `F${name}`;
Input.propTypes = InputPropTypes;
export default Input;