import React, { useState } from 'react';
import { useAppDispatch, useGraphQueryResult, useQuerybuilderGraph, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
import ControlContainer from '@graphpolaris/shared/lib/components/controls';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { VisualizationComponent } from '../';
import VisualizationDialog from './dialog';

export const VisualizationPanel = () => {
  const vis = useVisualizationState();
  const graphQueryResult = useGraphQueryResult();
  const query = useQuerybuilderGraph();
  const dispatch = useAppDispatch();
  const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
  const [showVisSettings, setShowVisSettings] = useState<boolean>(false);

  return (
    <div className="vis-panel h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
      <VisualizationDialog open={showVisSettings} onClose={() => setShowVisSettings(false)} />
      <div className="sticky top-0 flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b border-secondary-200">
        <h1 className="text-xs font-semibold text-secondary-800">{vis.activeVisualization} visualization</h1>
        <ControlContainer>
          <Button
            type="secondary"
            variant="ghost"
            size="xs"
            iconName="Settings"
            onClick={() => {
              setShowVisSettings(!showVisSettings);
            }}
          />
          <Button
            type="secondary"
            variant="ghost"
            size="xs"
            iconName="Apps"
            onClick={() => {
              setVisDropdownOpen(!visDropdownOpen);
            }}
          />
          {visDropdownOpen && (
            <DropdownItemContainer align="top-6 right-6">
              {Object.keys(Visualizations).map((key) => (
                <DropdownItem
                  key={key}
                  value={key}
                  onClick={() => {
                    setVisDropdownOpen(false);
                    dispatch(setActiveVisualization(Visualizations[key as keyof typeof Visualizations]));
                  }}
                />
              ))}
            </DropdownItemContainer>
          )}
        </ControlContainer>
      </div>

      {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>
      ) : (
        <div className="w-full h-full">
          <VisualizationComponent />
        </div>
      )}
    </div>
  );
};