import { FC, useRef } from "react";
import useOnclickOutside from "@/hooks/useOnClickOutside";
import PencilIcon from "@/components/Icons/Pencil";
import MoveIcon from "@/components/Icons/Move";
import LockIcon from "@/components/Icons/Lock";

interface ContextMenuProps {
  x: number;
  y: number;
  closeContextMenu: () => void;
  renameFunction: () => void;
  setFile: (file: any) => void;
  file?: any;
}

const ContextMenuContainer: FC<ContextMenuProps> = ({
  x,
  y,
  closeContextMenu,
  renameFunction,
  setFile,
  file,
}) => {
  const contextMenuRef = useRef<HTMLDivElement>(null);
  useOnclickOutside(contextMenuRef, closeContextMenu);

  return (
    <div
      ref={contextMenuRef}
      className="bg-secondary text-secondary-content p-2 mx-0 rounded-md cursor-pointer w-60"
      style={{ position: "absolute", top: y, left: x }}
    >
      <div
        className="flex hover:bg-primary-content hover:text-primary"
        onClick={() => {
          setFile(file);
          renameFunction();
          console.log("Renaming file:", file?.attributes.name);
        }}
      >
        <div className="mr-2" style={{ transform: "scale(0.77)" }}>
          <PencilIcon />
        </div>
        Rename
      </div>
      <div
        className="flex hover:bg-primary-content hover:text-primary"
        onClick={() => {
          console.log("Moving file:", file?.attributes.name);
        }}
      >
        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
          <MoveIcon />
        </div>
        Move
      </div>
      <div
        className="flex hover:bg-primary-content hover:text-primary"
        onClick={() => {
          console.log("Changing permissions for file:", file?.attributes.name);
        }}
      >
        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
          <LockIcon />
        </div>
        Permissions
      </div>
    </div>
  );
};

export default ContextMenuContainer;