import React, {CSSProperties, useRef, useState} from "react";
import "../style/title_input.css";

export interface TitleInputOptions {
    style: CSSProperties,
    default_value: string,
    on_validated: (a: string) => void
}

export default function TitleInput({style, default_value, on_validated}: TitleInputOptions) {
    const [value, setValue] = useState(default_value);
    const ref = useRef<HTMLInputElement>(null);

    return (
        <input className="title_input"
               ref={ref}
               style={style}
               type="text"
               value={value}
               onChange={event => setValue(event.target.value)}
               onBlur={_ => on_validated(value)}
               onKeyDown={event => {
                   if (event.key == 'Enter')
                       ref.current?.blur();
               }}
        />
    )
}