import React from "react";
import { useRef, useState } from "react";

type ClickToEditTextFieldProps = {
  normalEl: JSX.Element;
}
export const ClickToEditTextField: React.FC = (props) => {
  const inputEl = useRef(null);
  const [isEditingName, setEditingName] = useState(false);

  function processChanges() {
    const trimmedInput = inputEl.current.value.trim();
    if (trimmedInput !== '' && trimmedInput !== el.name) {
      renameElement(path, trimmedInput);
    }
    setEditingName(false);
  }

  function onKeyDown(event: React.KeyboardEvent) {
    switch (event.key) {
      case 'Enter':
        processChanges();
        break;
      case 'Escape':
        setEditingName(false);
        break;
    }
  }
  function onBlur() {
    processChanges();
  }
  function onClick() {
    if (!isEditingName) {
      setEditingName(true);
    }
  }
 return <span
          onClick={onClick}
          className={isEditingName ? 'el-name' : 'el-name click-to-edit'}
        >
          {isEditingName ? (
            <input
              type='text'
              ref={inputEl}
              defaultValue={currentValue}
              onBlur={onBlur}
              onKeyDown={onKeyDown}
              autoFocus
            ></input>
          ) : (
            el.name ?? '(Kein Name vorhanden)'
          )}
        </span>
}