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

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

const FileBrowserElement: React.FC<Props> = (props) => {
	return (
		<tr 
			onClick={()=>{
				if(props.file){
					props.onClick?.(props.file)
				}else if(props.dir){
					props.onClick?.(props.dir)
				}
			}}

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

FileBrowserElement.propTypes = {
	dir: PropTypes.any,
	file: PropTypes.any,
	onClick: PropTypes.func
}

export default FileBrowserElement