import { Sheet, SheetContent, SheetDescription } from '../ui/sheet';
import AddShapes from './AddShapes';
import { Separator } from '../ui/separator';
import { Button } from '../ui/button';
import { X, Store, Shapes, Upload } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import AllIconsPage from '../EachComponent/Icons/AllIcons';
import UploadImage from '../EachComponent/UploadImage';
import { useContext } from 'react';
import OpenContext from '../Context/openContext/OpenContext';

const left = "left";

const SheetLeftPanel = () => {
    const { leftPanelOpen, setLeftPanelOpen } = useContext(OpenContext);

    // Prevent closing on outside clicks
    const handleOpenChange = (isOpen) => {
        if (!isOpen) {
            // Do nothing when clicking outside
            return; // Sheet won't close
        }
        setLeftPanelOpen(isOpen); // Update only on valid trigger
    };

    // Function to handle closing the sheet
    const handleClose = () => {
        setLeftPanelOpen(false); // Close when button is clicked
    };

    return (
        <Sheet onOpenChange={handleOpenChange} open={leftPanelOpen} modal={false}>
            <SheetContent side={left} className="w-[300px] top-[60px]">
                <SheetDescription className="text-left flex font-semibold">
                    <p>Your customizable, canvas playground.</p>
                    <Button variant={"outline"} onClick={handleClose}>
                        <X />
                    </Button>
                </SheetDescription>

                <Separator className="my-2" />
                <Tabs defaultValue="shapes" className="w-full relative">
                    <TabsList className="grid w-full grid-cols-3 gap-1 h-fit">
                        <TabsTrigger value="shapes" className="truncate text-xs grid items-center justify-center">
                            <Shapes className="h-4 w-4 mx-auto" />
                            <p>Shapes & Text</p>
                        </TabsTrigger>

                        <TabsTrigger value="icons" className="truncate text-xs grid items-center justify-center">
                            <Store className="h-4 w-4 mx-auto" />
                            <p>Icons</p>
                        </TabsTrigger>

                        <TabsTrigger value="image" className="truncate text-xs grid items-center justify-center">
                            <Upload className="h-4 w-4 mx-auto" />
                            <p>Image</p>
                        </TabsTrigger>
                    </TabsList>

                    <Separator className="my-2" />

                    <TabsContent value="shapes" className="mt-2 h-[450px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
                        <AddShapes />
                    </TabsContent>

                    <TabsContent value="icons" className="mt-2">
                        <AllIconsPage />
                    </TabsContent>

                    <TabsContent value="image" className="mt-2 h-[450px] overflow-y-scroll px-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
                        <UploadImage />
                    </TabsContent>
                </Tabs>
            </SheetContent>
        </Sheet>
    )
}

export default SheetLeftPanel