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


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

export enum Action {
	FileDelete,
	FileCopy,
	FilePaste,
	FileMove,
	DirDelete
}

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

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={Action.FileCopy} >Copy</Item>
				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
				<Separator />
				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
			</Menu>
			<Menu id={CONTEXT_MENU_DIR} animation={false}>
				<Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
				<Item onClick={onClick}  >Item 2</Item>
				<Separator />
				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
			</Menu>
		</>
	)
}

export default FileBrowserContextMenu