import { Suspense, useEffect, useRef } from 'react';
import { FiFileText, FiRefreshCw } from 'react-icons/fi';
import { useToggle } from '@react-hookz/web';
import { useDataContext } from '../providers/DataProvider';
import EntityList from './EntityList';
import styles from './Explorer.module.css';
import { EXPLORER_ID, focusLast, focusNext } from './utils';
import { indexOf } from 'lodash';
import  HsdsProvider   from '../providers/hsds/HsdsProvider'; 
import type { DataProviderApi } from '../../src/providers/api';
import SingleFile from './SingleFile';

interface Props {
  selectedPath: string;
  onSelect: (path: string) => void;
  onSelectFile: (path: string) => void;
  onSelectFileIndex: (index:number) => void;
  // filename:string[];

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


  function Explorer(props: Props) {
    const {  selectedPath, onSelect ,onSelectFile,onSelectFileIndex,url,username,password,filepath,fileExt,fileIndex,getExportURL} = props;
  
    return(
      <div style={{height:"100%",position:"absolute",width:"100%",left:0,top:0}}>
    {filepath.map((filepath,index)=>{
    
       
     return(
      <div  key={index}>
      <HsdsProvider 
      // url={`http://192.168.23.107:5000`}  
      url={url}  
      username={username}
      password={password}
      filepath={filepath}
      fileExt={fileExt[index]}
      
      >
         <SingleFile selectedPath={selectedPath} fileIndex={index} onSelect={onSelect} onSelectFile={onSelectFile} onSelectFileIndex={onSelectFileIndex}/>
      </HsdsProvider>
      </div>
     )
     
    })} 
    
    </div> 
    )

}

export default Explorer;