import * as React from 'react';
import './EditableText.scss';
import { Size } from '@dash/components';

export interface IEditableTextProps {
    text: string;
    placeholder?: string;
    editing: boolean;
    onEdit: (newText: string) => void;
    setEditing: (editing: boolean) => void;
    backgroundColor?: string;
    size?: Size;
    height?: number;
}

/**
 * Editable Text is used for inline renaming of some text.
 * It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
 * @param props
 * @returns
 */
export const EditableText = (props: IEditableTextProps) => {
    const { editing, height, text, onEdit, setEditing, backgroundColor, placeholder } = props;

    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        onEdit(event.target.value);
    };

    return editing ? (
        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
    ) : (
        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
    );
};