import React, { useState } from "react";
import { RenameIcon } from "../../icons/ContextMenuIcons";
import {
  useLeftData,
  useTopData,
} from "../../../store/visualization/useZone3DWidgetStore";

type RenameTooltipProps = {
  name: string;
  onSubmit: (newName: string) => void;
};

const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
  const [value, setValue] = useState(name);

  const { top } = useTopData();
  const { left } = useLeftData();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit(value.trim());
  };

  return (
    <div
      className="rename-tool-tip"
      style={{
        top: `${top}px`,
        left: `${left}px`,
      }}
    >
      <div className="header">
        <div className="icon">
          <RenameIcon />
        </div>
        <div className="name">Name</div>
      </div>
      <form className="input" onSubmit={handleSubmit}>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          autoFocus
        />
      </form>
    </div>
  );
};

export default RenameTooltip;