import SafiInput from "./SafiInput";

const { useState, useRef, useEffect } = wp.element;

const EditableText = ( {
    value: initialValue,
    defaultValue = "",
    onChange,
    suffix = "",
} ) => {
    const [isEditing, setIsEditing] = useState( false );
    const [value, setValue] = useState( initialValue );
    const [isHovered, setIsHovered] = useState( false );
    const inputRef = useRef( null );

    const handleEnterEdit = () => {
        setIsEditing( true );
    };

    const handleBlur = ( e ) => {
        setIsEditing( false );
        const val = e.target.value.trim();

        if ( val === "" ) {
            setValue( defaultValue );
            return;
        }

        onChange?.( value );
    };

    const handleKeyDown = ( e ) => {
        if ( e.key === "Enter" ) {
            e.preventDefault();
            handleBlur(e);
        }
    };

    const handleChange = ( e ) => {
        setValue( e.target.value.trim() );
    };

    // When entering edit mode, autofocus + select text
    useEffect( () => {
        if ( isEditing && inputRef.current ) {
            inputRef.current.focus();
            inputRef.current.select();
        }
    }, [isEditing] );

    return (
        <div
            style={{
                display: "inline-flex",
                // alignItems: "center",
                cursor: "pointer",
                gap: "6px",
            }}
            onMouseEnter={() => setIsHovered( true )}
            onMouseLeave={() => setIsHovered( false )}
            onDoubleClick={handleEnterEdit}
        >
            {isEditing ? (
                <SafiInput
                    ref={inputRef}
                    type="text"
                    className="safi-plain"
                    value={value}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    onKeyDown={handleKeyDown}
                    style={{ minWidth: "300px" }}
                />
            ) : (
                <>
                    <span 
                    style={{ minWidth: "50px", minHeight: "20px" }}
                    >{value + suffix}</span>
                    {isHovered && (
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            viewBox="0 0 16 16"
                            style={{ cursor: "pointer" }}
                            onClick={handleEnterEdit}
                        >
                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 
                            3a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 
                            0 1-.168.11l-5 2a.5.5 0 0 
                            1-.65-.65l2-5a.5.5 0 0 
                            1 .11-.168l9.5-9.5zM11.207 
                            2.5L13.5 4.793 14.793 
                            3.5 12.5 1.207 11.207 2.5zm1.586 
                            3L10.5 3.207 4 9.707V10h.5a.5.5 
                            0 0 1 .5.5V11h.5a.5.5 0 0 
                            1 .5.5V12h.293l6.5-6.5z" />
                        </svg>
                    )}
                </>
            )}
        </div>
    );
};

export default EditableText;
