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 { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';

import styles from './App.module.css';
import ErrorFallback from './ErrorFallback';
import LoadingFallback from './LoadingFallback';
import VisConfigProvider from './VisConfigProvider';
import BreadcrumbsBar from './breadcrumbs/BreadcrumbsBar';
import type { FeedbackContext } from './breadcrumbs/models';
import Explorer from './explorer/Explorer';
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';
import RightPart from './right';

interface Props {
  explorerOpen?: boolean;

  initialPath?: string;
  getFeedbackURL?: (context: FeedbackContext) => string;
  disableDarkMode?: boolean;
  propagateErrors?: boolean;
  // filename:string[];

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

function App(props: Props) {
  const {
    explorerOpen: initialExplorerOpen = true,
    initialPath = '/',
    getFeedbackURL,
    disableDarkMode,
    propagateErrors,
    url,
    username,
    password,
    filepath,
    fileExt,
    fileIndex,
    getExportURL,
  } = props;

  const [selectedPath, setSelectedPath] = useState<string>(initialPath);
  const [isExplorerOpen, toggleExplorerOpen] = useToggle(initialExplorerOpen);
  const [isInspecting, setInspecting] = useState(false);
  const [selectedFilePath,setSelectedFilePath] = useState<string>(filepath[filepath.length-1]);
  const [selectedFileIndex,setSelectedFileIndex] = useState<number>(fileExt.length-1);

  const { valuesStore } = useDataContext();

  //文件内部路径
  function onSelectPath(path: string) {
    setSelectedPath(path);
    valuesStore.cancelOngoing();
    valuesStore.evictCancelled();
  }

  function onSelectFilePath(filepath:string){
    setSelectedFilePath(filepath);
    valuesStore.cancelOngoing();
    valuesStore.evictCancelled();
  }

  function onSelectFileIndex(fileIndex:number){
    setSelectedFileIndex(fileIndex);
    valuesStore.cancelOngoing();
    valuesStore.evictCancelled();
  }

  return (
  
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={(err) => {
        if (propagateErrors) {
          throw err;
        }
      }}
    >
      <ReflexContainer
        className={styles.root}
        data-allow-dark-mode={disableDarkMode ? undefined : ''}
        orientation="vertical"
      >
        <ReflexElement
          className={styles.explorer}
          style={{ display: isExplorerOpen ? undefined : 'none' }}
          flex={15}
          minSize={150}
        >
          
      
          <Explorer selectedPath={selectedPath} onSelect={onSelectPath} onSelectFile={onSelectFilePath} onSelectFileIndex={onSelectFileIndex} url={url} username={username} password={password} filepath={filepath} fileExt={fileExt} fileIndex={fileIndex} getExportURL={getExportURL} />
              
          {/* <Explorer selectedPath={selectedPath} onSelect={onSelectPath} /> */} 
 
         </ReflexElement>
        
        <ReflexSplitter
          className={styles.splitter}
          style={{ display: isExplorerOpen ? undefined : 'none' }}
        />

        <ReflexElement className={styles.mainArea} flex={75} minSize={500}>
          <RightPart  selectedPath={selectedPath} onSelect={onSelectPath} selectedFilePath={selectedFilePath} selectedFileIndex={selectedFileIndex} url={url} username={username} password={password}  fileExt={fileExt}  getExportURL={getExportURL}/>
        </ReflexElement>
      </ReflexContainer>
    </ErrorBoundary>
  );
}

export default App;