import React, { useState, useRef, useEffect } from 'react';
import { useAppDispatch, useGraphQueryResult, useQuerybuilderGraph, useVisualization } from '@graphpolaris/shared/lib/data-access';
import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
import VisualizationBar from './bar';
import { VisualizationManager } from './manager';

export const VisualizationPanel = ({ manager }: { manager: VisualizationManager }) => {
  const query = useQuerybuilderGraph();
  const graphQueryResult = useGraphQueryResult();
  const visDropdownRef = useRef<HTMLDivElement>(null);
  const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (visDropdownRef.current && !visDropdownRef.current.contains(event.target as Node)) {
        setVisDropdownOpen(false);
      }
    };
    if (visDropdownOpen) document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [visDropdownOpen]);

  return (
    <div className="vis-panel h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
      <VisualizationBar manager={manager} />
      {graphQueryResult.queryingBackend ? (
        <div className="w-full h-full flex flex-col items-center justify-center overflow-hidden">
          <LoadingSpinner>Querying backend...</LoadingSpinner>
        </div>
      ) : graphQueryResult.nodes.length === 0 ? (
        <div className="w-full h-full flex flex-col items-center justify-center">
          <p>No data available to be shown</p>
          {query.nodes.length > 0 ? <p>Query resulted in empty dataset</p> : <p>Query for data to visualize</p>}
        </div>
      ) : manager.tabs.length === 0 ? (
        <div>Choose vis</div>
      ) : (
        <div className="w-full h-full">{manager.renderComponent()}</div>
      )}
    </div>
  );
};