// Author: fruit.com.cn
import { Plus, Upload } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { useLocale } from '../../app/providers/AppProviders';

export function CreateMenu({ onUpload }) {
  const { locale } = useLocale();
  const [open, setOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    if (!open) return undefined;
    const closeMenu = (event) => {
      if (!menuRef.current?.contains(event.target)) setOpen(false);
    };
    document.addEventListener('mousedown', closeMenu);
    return () => document.removeEventListener('mousedown', closeMenu);
  }, [open]);

  const selectUpload = () => {
    setOpen(false);
    onUpload?.();
  };

  return (
    <div className="create-wrap" ref={menuRef}>
      <button className="create-button" type="button" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen((value) => !value)}>
        <Plus size={20} /><span>{locale.create}</span>
      </button>
      {open && (
        <div className="create-menu" role="menu">
          <button type="button" role="menuitem" onClick={selectUpload}>
            <Upload size={18} /><span>{locale.uploadVideo}</span>
          </button>
        </div>
      )}
    </div>
  );
}