import React, { useEffect, useRef, useState } from 'react'
import type { LucideIcon } from 'lucide-react'
import { FileSpreadsheet, FileText, Printer, Upload } from 'lucide-react'
import { useTranslation } from '../../i18n'
import PackingPrintPreview from './PackingPrintPreview'
import { usePackingExport, type PackingView } from './usePackingExport'
interface PackingExportMenuProps {
tripId: number
view: PackingView
style: React.CSSProperties
className?: string
}
function MenuItem({ icon: Icon, label, onClick }: { icon: LucideIcon; label: string; onClick: () => void }) {
return (
)
}
/**
* The list's way out, beside Import in the Lists header (#875, #1420): print or save
* as PDF, a Markdown checklist, or CSV in the import's own format. Covers the view on
* screen and renders nothing while that view is empty.
*/
export default function PackingExportMenu({ tripId, view, style, className }: PackingExportMenuProps): React.ReactElement | null {
const { t } = useTranslation()
const packingExport = usePackingExport(tripId, view)
const [open, setOpen] = useState(false)
const menuRef = useRef(null)
useEffect(() => {
if (!open) return
const onPointer = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false)
}
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
document.addEventListener('mousedown', onPointer)
document.addEventListener('keydown', onKey)
return () => {
document.removeEventListener('mousedown', onPointer)
document.removeEventListener('keydown', onKey)
}
}, [open])
if (!packingExport.hasItems && !packingExport.printHtml) return null
const choose = (action: () => void | Promise) => () => {
setOpen(false)
void action()
}
return (
// A flex box, so the button stretches to the row height like its neighbours in the header.
{open && (
)}
)
}