import { useCallback, useState, type JSX } from 'react';

import { Modal } from '@grafana/ui';

import { NetworkGraph, type Props as NetWorkGraphProps } from './NetworkGraph';
import { type GraphEdge, type GraphNode } from './types';

interface NetworkGraphModalApi {
  showModal: () => void;
}

interface OwnProps extends Pick<NetWorkGraphProps, 'direction'> {
  show: boolean;
  title: string;
  nodes: GraphNode[];
  edges: GraphEdge[];
  children: (api: NetworkGraphModalApi) => JSX.Element;
}

interface ConnectedProps {}

interface DispatchProps {}

type Props = OwnProps & ConnectedProps & DispatchProps;

export function NetworkGraphModal({ edges, nodes, show: propsShow, title, children }: Props): JSX.Element {
  const [show, setShow] = useState(propsShow);
  const showModal = useCallback(() => setShow(true), [setShow]);
  const onClose = useCallback(() => setShow(false), [setShow]);

  return (
    <>
      <Modal isOpen={show} title={title} onClickBackdrop={onClose} onDismiss={onClose}>
        <NetworkGraph nodes={nodes} edges={edges} />
      </Modal>
      {children({ showModal })}
    </>
  );
}
