import * as React from "react";
import TextField from "@material-ui/core/TextField";

import { ColumnsProps } from "../types";
import styles from "@sc/modules/v2/CRUD/FormBuilder/styles";
/**
 * A number (1-12) component for collecting the number of
 * columns to use for the form field
 *
 * ToDo: Instead of a text field, give them visual options (1 col, 2 col, 3 col, etc.) in the form of buttons (FancySelector?)
 */
const Columns: React.FC<ColumnsProps> = ({
  onChange = () => null,
  onBlur = () => null,
  value,
  label = "Columns",
}) => {
  let inputRef = React.useRef(null);

  // React.useEffect(() => {
  //   setTimeout(() => {
  //     inputRef.current.focus();
  //   }, 50);
  // }, []);
  return (
    <TextField
      type="number"
      data-testid="FormBuilder-Attributes-Columns"
      onChange={(e) => onChange(e.target.value)}
      onBlur={(e) => onBlur(e.target.value)}
      onClick={(e) => e.stopPropagation()}
      defaultValue={value}
      value={value}
      style={styles.input}
      variant="filled"
      // label="Columns"
      label={label || "Columns"}
      inputRef={inputRef}
    />
  );
};

export default Columns;