import React from "react";
import { NodeData } from "../../graph";
import FancyScrollbar from "../fancyscrollbar";
import Collapsible from "../collapsible";

interface NeighborsProps {
    neighbors: NodeData[];
    nodeClickedCallback?: (node: NodeData) => void;
}

function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
    const classes = [...new Set<string>(neighbors.map((node) => node.type))];
    const categories = new Map<string, Array<NodeData>>();

    for (const cls of classes) {
        categories.set(cls, []);
    }

    for (const neighbor of neighbors) {
        categories.get(neighbor.type).push(neighbor);
    }

    return (
        <div className={"neighbor-container"}>
            <FancyScrollbar>
                <Collapsible header={"Verwandte Inhalte"}>
                    {classes.map((cls) => (
                        <Collapsible header={cls} key={cls} heightTransition={false}>
                            <ul>
                                {categories.get(cls).map((node) => (
                                    <li key={node.name}>{node.name}</li>
                                ))}
                            </ul>
                        </Collapsible>
                    ))}
                </Collapsible>
            </FancyScrollbar>
        </div>
    );
}

export default Neighbors;