import '@h5web/lib'; // make sure lib styles come first in CSS bundle

import { useToggle } from '@react-hookz/web';
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import ErrorFallback from './ErrorFallback';
import LoadingFallback from './LoadingFallback';
import VisConfigProvider from './VisConfigProvider';
import BreadcrumbsBar from './breadcrumbs/BreadcrumbsBar';
import type { FeedbackContext } from './breadcrumbs/models';
import MetadataViewer from './metadata-viewer/MetadataViewer';
import { useDataContext } from './providers/DataProvider';
import Visualizer from './visualizer/Visualizer';
import  HsdsProvider  from '../src/providers/hsds/HsdsProvider'; 
import type { DataProviderApi } from '../../app/src/providers/api';


interface Props {
  explorerOpen?: boolean;
  initialPath?: string;
  getFeedbackURL?: (context: FeedbackContext) => string;
  selectedPath:string
  onSelect: (path: string) => void;

  selectedFilePath:string;
  selectedFileIndex:number;

  url: string;
  username: string;
  password: string;
  fileExt:string[];
//   fileIndex:number
  getExportURL?: DataProviderApi['getExportURL'];
}

function RightPart(props: Props) {
  const {
    explorerOpen: initialExplorerOpen = true,
    initialPath = '/',
    getFeedbackURL,
    selectedPath,
    onSelect,
    selectedFilePath,selectedFileIndex,
    url,username,password,fileExt,getExportURL
  } = props;


  const [isExplorerOpen, toggleExplorerOpen] = useToggle(initialExplorerOpen);
  const [isInspecting, setInspecting] = useState(false);


  return (
        <HsdsProvider 
      // url={`http://192.168.23.107:5000`}  
      url={url}  
      username={username}
      password={password}
      filepath={selectedFilePath}
      fileExt={fileExt[selectedFileIndex]}
      >

          <BreadcrumbsBar
            path={selectedPath}
            fileIndex={selectedFileIndex}
            isExplorerOpen={isExplorerOpen}
            isInspecting={isInspecting}
            onToggleExplorer={toggleExplorerOpen}
            onChangeInspecting={setInspecting}
            onSelectPath={onSelect}
            getFeedbackURL={getFeedbackURL}
          />
          <VisConfigProvider>
            <ErrorBoundary
              resetKeys={[selectedPath, isInspecting]}
              FallbackComponent={ErrorFallback}
            >
              <Suspense
                fallback={<LoadingFallback isInspecting={isInspecting} />}
              >
                {isInspecting ? (
                  <MetadataViewer
                    path={selectedPath}
                    fileIndex={selectedFileIndex}
                    onSelectPath={onSelect}
                  />
                ) : (
                  <Visualizer path={selectedPath} />
                )}
              </Suspense>
            </ErrorBoundary>
          </VisConfigProvider>
          </HsdsProvider>
      
  );
}
export default RightPart;