import React, { useState, useRef, useEffect } from 'react';
import { DownloadIcon, PrintIcon, MarkdownIcon, ChevronDownIcon } from './Icons';
import { translations } from '../constants';

interface ExportMenuProps {
    onDownloadMarkdown: () => void;
    onPrint: () => void;
    t: typeof translations.de;
}

export const ExportMenu: React.FC<ExportMenuProps> = ({ onDownloadMarkdown, onPrint, t }) => {
    const [isOpen, setIsOpen] = useState(false);
    const menuRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);

    return (
        <div className="relative print:hidden" ref={menuRef}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex items-center justify-center px-4 py-2 border border-slate-300 dark:border-slate-600 text-sm font-medium rounded-md shadow-sm text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
                aria-haspopup="true"
                aria-expanded={isOpen}
            >
                <DownloadIcon className="mr-2 h-5 w-5" />
                {t.exportButton}
                <ChevronDownIcon className={`ml-2 h-4 w-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`} />
            </button>
            {isOpen && (
                <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-800 ring-1 ring-black dark:ring-slate-700 ring-opacity-5 focus:outline-none z-10">
                    <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                        <button
                            onClick={() => { onDownloadMarkdown(); setIsOpen(false); }}
                            className="w-full text-left flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
                            role="menuitem"
                        >
                            <MarkdownIcon className="mr-3 h-5 w-5 text-slate-500" />
                            {t.exportAsMarkdown}
                        </button>
                        <button
                            onClick={() => { onPrint(); setIsOpen(false); }}
                            className="w-full text-left flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
                            role="menuitem"
                        >
                            <PrintIcon className="mr-3 h-5 w-5 text-slate-500" />
                            {t.exportAsPdf}
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};