import React from "react"
import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"


export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"

export enum Action {
	FileDelete
}

interface Props {
    onSelect?: (action: Action, id: string)=>void
}

const FileBrowserContextMenu: React.FC<Props> = (props) => {

	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, Action>) {
		if (itemProps?.id && data != null){
			props.onSelect?.(data,itemProps.id) 
		}
	}

	return (
		<>
			<Menu id={CONTEXT_MENU_FILE} animation={false}>
				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
				<Item onClick={onClick} data="item2" >Item 2</Item>
				<Separator />
				<Item disabled>Disabled</Item>
				<Separator />
				<Submenu label="Foobar">
					<Item onClick={onClick}  >Sub Item 1</Item>
					<Item onClick={onClick}  >Sub Item 2</Item>
				</Submenu>
			</Menu>
			<Menu id={CONTEXT_MENU_DIR} animation={false}>
				<Item onClick={onClick}  >Item 1</Item>
				<Item onClick={onClick}  >Item 2</Item>
				<Separator />
				<Item disabled>Disabled</Item>
				<Separator />
				<Submenu label="Foobar">
					<Item onClick={onClick}  >Sub Item 1</Item>
					<Item onClick={onClick}  >Sub Item 2</Item>
				</Submenu>
			</Menu>
		</>
	)
}

export default FileBrowserContextMenu