import React from "react"
import { BodyInputText } from "./style"

export interface TextEditorProps {
    value: string,
    onChange: (value: string) => void,
    onEditting: (editting: boolean) => void,
}

export const TextEditor: React.FC<TextEditorProps> = ({ value, onChange, onEditting }) => {
    const [currentInput, setCurrentInput] = React.useState<string>(value);
  
    const handleChange = (event: any) => {
        setCurrentInput(event.target.value);
        onChange(event.target.value)
    }

    return (
        <BodyInputText
            focused
            variant="standard"
            value={currentInput ? currentInput : ''}
            onChange={handleChange}
            onBlur={() => onEditting(false)}
            InputProps={{ autoFocus: true }} />
    )
}