import { useRef } from 'react';
import { FolderPlus, Upload, FolderUp, ClipboardPaste } from 'lucide-react';
import type { UseFileBrowserAppType } from '../../useFileBrowserApp';

type DefaultActionsProps = {
  fileBrowserManager: UseFileBrowserAppType;
};

export const DefaultActions = ({ fileBrowserManager }: DefaultActionsProps) => {
  const { handleCreateDir, handleUpload, clipboard, handlePaste } = fileBrowserManager;
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const folderInputRef = useRef<HTMLInputElement | null>(null);

  const handleFileChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
    if (ev.target.files?.length) {
      handleUpload(ev.target.files);
      ev.target.value = '';
    }
  };

  return (
    <>
      <button
        onClick={() => {
          const name = prompt('Folder name');
          if (name?.trim()) handleCreateDir(name.trim());
        }}
        title="New folder"
        className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
      >
        <FolderPlus className="h-4 w-4" />
      </button>

      <button
        onClick={() => fileInputRef.current?.click()}
        title="Upload files"
        className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
      >
        <Upload className="h-4 w-4" />
        <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileChange} />
      </button>

      <button
        onClick={() => folderInputRef.current?.click()}
        title="Upload folder"
        className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
      >
        <FolderUp className="h-4 w-4" />
        <input
          ref={(input) => {
            folderInputRef.current = input;
            if (input) input.setAttribute('webkitdirectory', '');
          }}
          type="file"
          className="hidden"
          onChange={handleFileChange}
        />
      </button>

      {clipboard !== null && (
        <button
          onClick={handlePaste}
          title="Paste"
          className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
        >
          <ClipboardPaste className="h-4 w-4" />
        </button>
      )}
    </>
  );
};
