import React, { useEffect, useState } from "react";
import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
import PropTypes from "prop-types";

export const TextField = (props) => {
  const [isFieldEmpty, setIsFieldEmpty] = useState(true);

  //for italicPlaceholder
  useEffect(() => {
    if (props.value.length === 0) {
      setIsFieldEmpty(true);
    } else {
      setIsFieldEmpty(false);
    }
  }, [props.value]);

  return (
    <TextFieldContainer style={props.containerStyle} className={props.className}>
      <TextFieldStyled
        
        {...props}
        sx={props.style}
        label={props.showAnimation ? props.placeholder : ""}
        italic={props.italicPlaceholder && isFieldEmpty}
      >
        {props.children}
      </TextFieldStyled>
    </TextFieldContainer>
  );
};

TextField.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
  children: PropTypes.node,
  className: PropTypes.string,
  placeholder: PropTypes.string,
  style: PropTypes.any,
  showAnimation: PropTypes.bool,
  containerStyle: PropTypes.any,
  italicPlaceholder: PropTypes.bool,
  width: PropTypes.string,
  height: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  error: PropTypes.string,
  helperText: PropTypes.string,
  autoFocus: PropTypes.bool,
  fullWidth: PropTypes.bool,
  type: PropTypes.string,
  InputProps: PropTypes.shape({
    startAdornment: PropTypes.node,
    endAdornment: PropTypes.node,
  }),
};

TextField.defaultProps = {
  italicPlaceholder: false,
  showAnimation: false,
};