import React from "react"
import { Directory, File } from "../generated/graphql"
import DirectoryComponent from "./DirectoryElement"
import FileElement from "./FileElement"

interface Props {
    file?: File
    dir?: Directory
    onClick?: (event: React.MouseEvent ,data: File | Directory) => void
	onContextMenu?: (e:React.MouseEvent) => void
}

const FileBrowserElement: React.FC<Props> = (props) => {
	return (
		<tr 
			className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
			onClick={(e)=>{
				if(props.file){
					props.onClick?.(e,props.file)
				}else if(props.dir){
					props.onClick?.(e,props.dir)
				}
			}}

			onContextMenu={(e)=>props.onContextMenu?.(e)}
			
		>
			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
		</tr>
	)
}

export default FileBrowserElement