import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinner';
import useMediaStore from '@/stores/MediaStore';
import { Edit3 } from 'lucide-react';
import { useEffect } from 'react';

interface EditSidebarProps {
    isOpen: boolean;
    onClose: () => void;
}

export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
    const { memes, backgrounds, isFetchingMemes, isFetchingBackgrounds, currentTab, setCurrentTab, fetchMemes, fetchBackgrounds } = useMediaStore();

    // Fetch media based on currentTab when it changes and data isn't fetched yet
    useEffect(() => {
        if (currentTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
            fetchMemes();
        } else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
            fetchBackgrounds();
        }
    }, [currentTab]);

    // Determine display states
    const isFetching = currentTab === 'memes' ? isFetchingMemes : isFetchingBackgrounds;
    const media = currentTab === 'memes' ? memes : backgrounds;
    const mediaType = currentTab === 'memes' ? 'memes' : 'backgrounds';

    return (
        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <SheetContent side="right" className="w-80 overflow-y-auto">
                <SheetHeader>
                    <SheetTitle className="flex items-center gap-3">
                        <Edit3 className="h-6 w-6" />
                        Edit Media
                    </SheetTitle>
                </SheetHeader>

                <div className="space-y-6">
                    {/* Background and Meme Selection */}
                    <div className="grid grid-cols-2 gap-4">
                        <div
                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
                                currentTab === 'backgrounds' ? 'border-blue-500' : 'border-gray-300'
                            }`}
                            onClick={() => setCurrentTab('backgrounds')}
                        >
                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
                                <img
                                    src="/placeholder.svg?height=64&width=120"
                                    alt="Gaming background"
                                    width={120}
                                    height={64}
                                    className="h-full w-full object-cover"
                                />
                            </div>
                            <span className="text-sm font-medium">Background</span>
                        </div>
                        <div
                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
                                currentTab === 'memes' ? 'border-blue-500' : 'border-gray-300'
                            }`}
                            onClick={() => setCurrentTab('memes')}
                        >
                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
                                <img
                                    src="/placeholder.svg?height=64&width=120"
                                    alt="Meme character"
                                    width={120}
                                    height={64}
                                    className="h-full w-full object-cover"
                                />
                            </div>
                            <span className="text-sm font-medium">Meme</span>
                        </div>
                    </div>

                    {/* Media Grid */}
                    {isFetching && <Spinner className="h-4 w-4"></Spinner>}
                    {!isFetching && media.length === 0 && <div className="w-full text-center">No {mediaType} available.</div>}
                    {!isFetching && media.length > 0 && (
                        <div className="grid grid-cols-2 gap-3">
                            {media.map((item, index) => (
                                <div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
                                    <img
                                        src={item.imageUrl}
                                        alt={currentTab === 'memes' ? 'Meme' : 'Background'}
                                        width={150}
                                        height={150}
                                        className="h-full w-full object-cover"
                                    />
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </SheetContent>
        </Sheet>
    );
}