import React, { useCallback } from 'react';
import type { ReactNode } from 'react';
import type { Identifier } from '../../types/identifiers';
import { FolderPlusIcon } from '../../ui/icons';
import FolderNode, { FolderIdentifier, FolderTreeNode } from './SidebarFolderNode';

interface SidebarFolderListProps {
    folderNodes: Map<FolderIdentifier, FolderTreeNode>;
    selectedFolder: FolderIdentifier | null;
    onToggle: (folderId: FolderIdentifier) => void;
    onSelect: (folderId: FolderIdentifier) => void;
    onDrop: (event: React.DragEvent<HTMLDivElement>, folderId: FolderIdentifier) => void;
    onDragOver: (event: React.DragEvent<HTMLDivElement>, folderId: FolderIdentifier) => void;
    onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
    onDeleteFolder: (folderId: FolderIdentifier) => void;
    onRenameFolder?: (folderId: FolderIdentifier, name: string) => void;
    onFolderDragStart?: (event: React.DragEvent<HTMLDivElement>, folderId: FolderIdentifier) => void;
    onFolderDragEnd?: (event: React.DragEvent<HTMLDivElement>) => void;
    draggedFolderId?: FolderIdentifier | null;
    onCreateFolder?: (parentId?: Identifier | null) => void;
    creatingFolder?: boolean;
}

const SidebarFolderList: React.FC<SidebarFolderListProps> = ({
    folderNodes,
    selectedFolder,
    onToggle,
    onSelect,
    onDrop,
    onDragOver,
    onDragLeave,
    onDeleteFolder,
    onRenameFolder,
    onFolderDragStart,
    onFolderDragEnd,
    draggedFolderId,
    onCreateFolder,
    creatingFolder,
}) => {
    const rootNode = folderNodes.get('root');

    const renderNodes = useCallback(
        (ids: FolderIdentifier[], depth: number): ReactNode =>
            ids.map((id) => {
                const node = folderNodes.get(id);
                if (!node) return null;
                return (
                    <FolderNode
                        key={id}
                        node={node}
                        depth={depth}
                        isSelected={selectedFolder === id}
                        onToggle={onToggle}
                        onSelect={onSelect}
                        onDrop={onDrop}
                        onDragOver={onDragOver}
                        onDragLeave={onDragLeave}
                        onDelete={onDeleteFolder}
                        onRename={onRenameFolder}
                        renderChildren={renderNodes}
                        onFolderDragStart={onFolderDragStart}
                        onFolderDragEnd={onFolderDragEnd}
                        draggingFolderId={draggedFolderId}
                        onCreateFolder={onCreateFolder}
                    />
                );
            }),
        [
            folderNodes,
            selectedFolder,
            onToggle,
            onSelect,
            onDrop,
            onDragOver,
            onDragLeave,
            onDeleteFolder,
            onRenameFolder,
            onFolderDragStart,
            onFolderDragEnd,
            draggedFolderId,
            onCreateFolder,
        ],
    );

    return (
        <div className="sidebar-section sidebar-section--folders">
            <div className="sidebar-section__header">
                <h3>Folders</h3>
                {onCreateFolder ? (
                    <div className="sidebar-section__actions">
                        <button
                            type="button"
                            className="icon-button"
                            onClick={() => onCreateFolder('root')}
                            aria-label="Create folder"
                            disabled={creatingFolder}
                        >
                            <FolderPlusIcon size={16} />
                        </button>
                    </div>
                ) : null}
            </div>
            <ul className="folder-tree">
                {rootNode && renderNodes([rootNode.id], 0)}
            </ul>
        </div>
    );
};

export default SidebarFolderList;
