import React from "react";

interface Props {
  closeRemapFunction: () => void;
  renameCallback: (file: any, newName: string) => void;
  file: any;
}

const Rename = (props: Props) => {
  const { closeRemapFunction, file, renameCallback } = props;
  const [newName, setNewName] = React.useState(file.attributes.name);

  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === "Escape") {
      console.log("esc");
      closeRemapFunction();
    } else if (event.key === "Enter") {
      console.log("enter pressed");
    }
  };

  const handleRename = (event: React.MouseEvent) => {
    // use from parent function named putRenameFile
    // renameFunction(file, newName);
    renameCallback(file, newName);
  };

  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (ref.current) {
      ref.current.focus();
    }
  }, []);

  return (
    <div
      ref={ref}
      onKeyDown={handleKeyDown}
      tabIndex={-1} // Dodano tabIndex, aby element był fokusowalny
      className="fixed inset-0 flex items-center justify-center z-50"
    >
      <div className="absolute inset-0 bg-black bg-opacity-75"></div>
      <div className="flex bg-secondary p-6 rounded-lg shadow-lg z-10">
        <input
          type="text"
          placeholder="Type here"
          className="input w-full max-w-xs text-primary"
          value={newName}
          onChange={(e) => setNewName(e.target.value)}
        />
        <button className="ml-2 btn" onClick={handleRename}>
          Rename
        </button>
      </div>
    </div>
  );
};

export default Rename;