import React from "react";
import { NodeData } from "../../graph";
import TitleArea from "./titlearea";
import FancyScrollbar from "../fancyscrollbar";
import MediaArea from "./mediaarea";

interface InfoBarProps {
    height: number;
    node: NodeData;
    nodeClosedCallback?: () => void;
}

function NodeInfoBar({ height, node, nodeClosedCallback }: InfoBarProps) {
    // const [isOpen, setIsOpen] = useState(open);
    // const [height, setHeight] = useState<number | undefined>(
    //     open ? undefined : 0
    // );
    //
    // const toggleOpen = () => {
    //     setIsOpen((prev) => !prev);
    // };
    //
    // const ref = useRef<HTMLDivElement>(null);
    //
    // useEffect(() => {
    //     if (isOpen) setHeight(targetHeight);
    //     else setHeight(0);
    // }, [isOpen]);

    return (
        <div id={"infoOverlay"} className={"detail-view"} style={{ height }}>
            <div
                className={"close-button"}
                id={"infoOverlayCloseButton"}
                onClick={nodeClosedCallback}
            >
                <p>&#10006;</p>
            </div>

            <div className={"detail-view-info-area"}>
                <FancyScrollbar>
                    <TitleArea name={node.name} image={node.banner} />
                    <MediaArea
                        description={node.description}
                        image={node.banner}
                        video={node.video}
                        references={node.references}
                    />
                </FancyScrollbar>
            </div>
        </div>
    );
}

export default NodeInfoBar;