import React from "react"
import { useState } from "react"
import { useOpenDirQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum"
import FileBrowserElement from "./FileBrowserElement"

const FileBrowser: React.FC = () => {
	const [path,setPath] = useState("/")

	const { data } = useOpenDirQuery({
		variables:{
			path
		}
	})

	return (
		<div>
			<Breadcrum path={path} onDirClick={(newPath)=>{
				setPath(newPath)
			}}/>
			<div>
				<table className="table table-striped table-hover">
					<thead>
						<tr>
							<th>Name</th>
							<th>Size</th>
						</tr>
					</thead>
					<tbody>

						{ data?.directorys.map(v => (<FileBrowserElement
							key={v?.id}
							dir={v}
							onClick={(data)=>{
								setPath(data.id)
							}}
						/>))}
							
						{ data?.files.map(v => (<FileBrowserElement 
							key={v?.id}
							file={v}
						/>))}
					</tbody>
				</table>
			</div>
		</div>
	)
}

export default FileBrowser