import type { DragEvent } from 'react';
import type { FolderInfo } from '@/core-bridge/types';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import styles from './FileExplorer.module.css';

interface Props {
  folder: FolderInfo; selected: boolean; dropping: boolean; enabled: boolean;
  onSelect: () => void; onOpen: () => void; onRename: () => void; onMenu: (x: number, y: number) => void;
  drop: { onDragOver: (e: DragEvent) => void; onDragLeave: (e: DragEvent) => void; onDrop: (e: DragEvent) => void };
}
export function ExplorerFolderRow(props: Props) {
  return <tr className={`${props.selected ? styles.selected : ''} ${props.dropping ? styles.dropTarget : ''}`} {...props.drop} data-drop-folder={props.folder.id}
    onClick={props.onSelect} onDoubleClick={props.onOpen} onContextMenu={(event) => { event.preventDefault(); event.stopPropagation(); props.onMenu(event.clientX, event.clientY); }}>
    <td /><td><button className={styles.name} type="button" onKeyDown={(event) => {
      if (event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); props.onOpen(); }
      if (event.key === 'F2' && props.enabled) { event.preventDefault(); props.onRename(); }
    }}><Icon name="folder" size={18} /><span>{props.folder.name}</span></button></td>
    <td className={styles.numeric}>文件夹</td><td className={styles.date}>—</td>
    <td><Button variant="ghost" icon="more" label={`文件夹操作 ${props.folder.name}`} onClick={(event) => { event.stopPropagation(); const rect = event.currentTarget.getBoundingClientRect(); props.onMenu(rect.right, rect.bottom); }} /></td>
  </tr>;
}