import React from "react";

import FancyScrollbar from "../fancyscrollbar";
import Collapsible from "../collapsible";

import "./neighbors.css";
import { NodeType } from "../../../common/graph/nodetype";
import { Node } from "../../../common/graph/node";

interface NeighborsProps {
    neighbors: Node[];
    nodeColors?: Map<string, NodeType>;
    nodeClickedCallback?: (node: Node) => void;
}

/**
 * Shows a list of neighbors of a specific node separated by node type.
 * @param neighbors List of neighbors
 * @param nodeClickedCallback Optional callback to handle clicks on neighbors.
 * @param nodeColors Mapping of node types to colors.
 * @constructor
 */
function Neighbors({
    neighbors,
    nodeClickedCallback,
    nodeColors = new Map<string, NodeType>(),
}: NeighborsProps) {
    const classes = [
        ...new Set<string>(neighbors.map((node) => node.type.name)),
    ];
    classes.sort(); // Sort classes to get a constant order of the node type tabs
    const categories = new Map<string, Array<Node>>();

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

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

    const handleNodeClick = (node: Node) => {
        if (nodeClickedCallback) {
            nodeClickedCallback(node);
        }
    };

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

export default Neighbors;