import { createPortal } from 'react-dom'
import { useEffect, useRef } from 'react'
import { Globe, ExternalLink, FileText } from 'lucide-react'
import { TargetIcon } from './TargetIcon'
import type { OpenWithItem } from '../../lib/openWithItems'
type Props = {
items: OpenWithItem[]
anchor: { top: number; bottom: number; left: number; right: number }
onClose: () => void
}
function ItemIcon({ item }: { item: OpenWithItem }) {
if ((item.icon === 'ide' || item.icon === 'file-manager') && item.target) return
if (item.icon === 'in-app-browser') return
if (item.icon === 'preview') return
return
}
export function OpenWithMenu({ items, anchor, onClose }: Props) {
const ref = useRef(null)
useEffect(() => {
const onDown = (e: MouseEvent) => { if (!ref.current?.contains(e.target as Node)) onClose() }
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
document.addEventListener('mousedown', onDown)
document.addEventListener('keydown', onKey)
return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey) }
}, [onClose])
return createPortal(
{items.map((item) => (
))}
,
document.body,
)
}