'use client';
import { useState } from 'react';
import { Plus, X, MessageSquare, FileText } from 'lucide-react';
import { CreatePostForm } from './CreatePostForm';
import { useAuth } from '@/contexts/AuthContext';
interface QuickPostFABProps {
defaultPostType?: 'discussion' | 'bill_comment';
defaultCategory?: string;
}
/**
* QuickPostFAB - Floating Action Button for quick post creation
*
* Features:
* - Sticks to bottom-right on mobile and desktop
* - Expands to show post type options
* - Opens CreatePostForm modal
* - Respects authentication state
*/
export function QuickPostFAB({ defaultPostType, defaultCategory }: QuickPostFABProps) {
const { user } = useAuth();
const [isExpanded, setIsExpanded] = useState(false);
const [isFormOpen, setIsFormOpen] = useState(false);
const [selectedPostType, setSelectedPostType] = useState<'discussion' | 'bill_comment' | null>(
null
);
if (!user) {
return null; // Only show for authenticated users
}
const handleCreatePost = (postType: 'discussion' | 'bill_comment') => {
setSelectedPostType(postType);
setIsFormOpen(true);
setIsExpanded(false);
};
const handleFormClose = () => {
setIsFormOpen(false);
setSelectedPostType(null);
};
return (
<>
{/* FAB Menu */}
<div className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-3">
{/* Expanded menu items */}
{isExpanded && (
<div className="flex flex-col gap-2 animate-in slide-in-from-bottom-4 duration-200">
{/* Discussion option */}
<button
onClick={() => handleCreatePost('discussion')}
className="
flex items-center gap-3 px-4 py-3 rounded-full
bg-background-secondary border-2 border-border-primary
text-text-primary font-medium shadow-lg
hover:border-accent-red hover:bg-background-primary
transition-all transform hover:scale-105
"
>
<MessageSquare size={20} />
<span className="pr-2">New Discussion</span>
</button>
{/* Bill comment option */}
<button
onClick={() => handleCreatePost('bill_comment')}
className="
flex items-center gap-3 px-4 py-3 rounded-full
bg-background-secondary border-2 border-border-primary
text-text-primary font-medium shadow-lg
hover:border-accent-red hover:bg-background-primary
transition-all transform hover:scale-105
"
>
<FileText size={20} />
<span className="pr-2">Comment on Bill</span>
</button>
</div>
)}
{/* Main FAB button */}
<button
onClick={() => setIsExpanded(!isExpanded)}
className={`
w-14 h-14 rounded-full shadow-lg
flex items-center justify-center
transition-all transform hover:scale-110
${
isExpanded
? 'bg-text-tertiary hover:bg-text-secondary'
: 'bg-accent-red hover:bg-red-700'
}
`}
aria-label={isExpanded ? 'Close menu' : 'Create post'}
>
{isExpanded ? <X size={24} className="text-white" /> : <Plus size={24} className="text-white" />}
</button>
</div>
{/* Backdrop when expanded */}
{isExpanded && (
<div
onClick={() => setIsExpanded(false)}
className="fixed inset-0 bg-black/20 z-30 backdrop-blur-sm"
/>
)}
{/* CreatePostForm modal */}
{selectedPostType && (
<CreatePostForm
postType={selectedPostType}
categoryId={selectedPostType === 'discussion' ? defaultCategory : undefined}
isOpen={isFormOpen}
onClose={handleFormClose}
onSuccess={() => {
handleFormClose();
// Optionally reload the page or show success message
window.location.reload();
}}
/>
)}
</>
);
}
