import React, { useEffect, useState } from 'react';
import Form from '@organisms/Form/Form';
import { InputGroup } from '@/index';
import { FormControlProps } from 'react-bootstrap';

interface TextFieldProps extends Omit<FormControlProps, "onChange"> {
  children?: any,
  groupClassName?: string,
  size?: "sm" | "lg" | undefined,
  value?: string,
  onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
  onKeyDown?: (e: any) => void
}

const TextField = ({children, groupClassName, size, value, onChange, onKeyDown, ...props}: TextFieldProps) => {
  const defaultValue = value ?? "" ?? props.defaultValue;
  const [internalValue, setInternalValue] = useState(defaultValue);

  useEffect(() => {
    setInternalValue(value ?? "");
  }, [value])

  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setInternalValue(event.target.value);
    if (onChange) onChange(event.target.value, event);
  }

  const handleOnKeyDown = (event: any) => {
    if (event.keyCode === 13) {
      event.preventDefault();
      if (onKeyDown) onKeyDown(event);
    }
  }

  return (
    <InputGroup size={size} className={`${groupClassName ?? ""}`}>
      <Form.Control
        value={internalValue}
        onChange={handleOnChange}
        onKeyDown={handleOnKeyDown}
        {...props}
      />
      {children}
    </InputGroup>
  );
};

export default TextField;
export {TextField, TextFieldProps};