import * as React from "react";
import { DescriptionProps } from "../types";
import styles from "@sc/modules/v2/CRUD/FormBuilder/styles";
import TextField from "@material-ui/core/TextField";

/**
 * A component for collecting the decription to use for the form field
 */
const Description: React.FC<DescriptionProps> = ({
  onChange = () => null,
  onBlur = () => null,
  value,
  label,
}) => {
  let inputRef = React.useRef(null);

  // React.useEffect(() => {
  //   setTimeout(() => {
  //     inputRef.current.focus();
  //   }, 50);
  // }, []);

  return (
    <>
      <TextField
        multiline
        data-testid="FormBuilder-Attributes-Description"
        onChange={(e) => onChange(e.target.value)}
        onBlur={(e) => onBlur(e.target.value)}
        onClick={(e) => e.stopPropagation()}
        label={label || "Description"}
        style={styles.input}
        value={value}
        variant="filled"
        inputRef={inputRef}
      />
    </>
  );
};

export default Description;