import { Button } from './ui/button'
import { Card, CardHeader, CardTitle } from './ui/card'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
import { useContext, useState } from 'react'
import { PencilRuler, Shapes, Store, Upload, ChevronDown, ChevronUp, X } from 'lucide-react';
import OpenContext from './Context/openContext/OpenContext';
import AllIconsPage from './EachComponent/Icons/AllIcons'
import { Separator } from './ui/separator'
import { ScrollArea } from './ui/scroll-area'
import AddShapes from './Layouts/AddShapes'
import UploadImage from './EachComponent/UploadImage'
import CustomizeShape from './EachComponent/CustomizeShape'
import RndComponent from './Layouts/RndComponent'

const ObjectPanel = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);
    const { tabValue, setTabValue, setOpenObjectPanel } = useContext(OpenContext);

    const rndValue = {
        valueX: 0,
        valueY: 20,
        width: 250,
        height: 0,
        minWidth: 280,
        maxWidth: 300,
        minHeight: 0,
        maxHeight: 500,
        bound: "parent"
    }

    return (
        <RndComponent value={rndValue}>
            <Card className="w-full shadow-lg px-1">
                <CardHeader className="p-1 mr-12">
                    <div className="flex items-center justify-between">
                        <Button className="rnd-escape" variant={"ghost"} size={"sm"} onClick={() => setOpenObjectPanel(false)}><X /></Button>
                        <CardTitle className="text-lg">Object Panel</CardTitle>
                    </div>
                </CardHeader>

                <Collapsible className="rnd-escape" open={!isCollapsed} onOpenChange={(open) => setIsCollapsed(!open)}>

                    <CollapsibleTrigger asChild>
                        <Button variant="ghost" size="sm" className="absolute top-1 right-2">
                            {isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
                        </Button>
                    </CollapsibleTrigger>

                    <CollapsibleContent>
                        <div className="h-[450px] xl:h-fit lg:h-fit md:h-fit overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white px-1 mb-2">
                            <Tabs className="w-full h-fit"
                                value={tabValue}
                                onValueChange={(value) => setTabValue(value)} // Sync tab state with context
                            >

                                <TabsList className="grid w-full grid-cols-4 h-fit gap-1">
                                    <TabsTrigger
                                        value="icons"
                                        className="flex flex-col gap-1 text-xs"
                                        onClick={() => setTabValue("icons")}
                                    >
                                        <Store className="h-4 w-4" />
                                        <span className="hidden sm:block">Icons</span>
                                    </TabsTrigger>

                                    <TabsTrigger
                                        value="shapes"
                                        className="flex flex-col gap-1 text-xs"
                                        onClick={() => setTabValue("shapes")}
                                    >
                                        <Shapes className="h-4 w-4" />
                                        <span className="hidden sm:block">Shapes</span>
                                    </TabsTrigger>

                                    <TabsTrigger
                                        value="images"
                                        className="flex flex-col gap-1 text-xs"
                                        onClick={() => setTabValue("images")}
                                    >
                                        <Upload className="h-4 w-4" />
                                        <span className="hidden sm:block">Images</span>
                                    </TabsTrigger>

                                    <TabsTrigger
                                        value="customize"
                                        className="flex flex-col gap-1 text-xs"
                                        onClick={() => setTabValue("customize")}
                                    >
                                        <PencilRuler className="h-4 w-4" />
                                        <span className="hidden sm:block">Customize</span>
                                    </TabsTrigger>
                                </TabsList>

                                {/* All icons */}
                                <TabsContent value="icons" className="mt-2">
                                    <div className="grid grid-cols-1">
                                        <AllIconsPage />
                                    </div>
                                </TabsContent>

                                {/* All shapes */}
                                <TabsContent value="shapes" className="mt-2">
                                    <div>
                                        <CardTitle className="p-1">Shapes </CardTitle>
                                        <Separator className="my-2" />
                                        <ScrollArea className="h-[450px]">
                                            <AddShapes />
                                        </ScrollArea>
                                    </div>
                                </TabsContent>

                                {/* Upload images */}
                                <TabsContent value="images" className="mt-2">
                                    <div>
                                        <CardTitle className="p-1">Upload</CardTitle>
                                        <Separator className="my-2" />
                                        <ScrollArea className="h-[450px]">
                                            <Card>
                                                <UploadImage />
                                            </Card>
                                        </ScrollArea>
                                    </div>
                                </TabsContent>

                                {/* Customization */}
                                <TabsContent value="customize" className="mt-2">
                                    <div>
                                        <CardTitle className="p-1">Object customization </CardTitle>
                                        <Separator className="my-2" />
                                        <ScrollArea className="h-[450px]">
                                            <CustomizeShape />
                                        </ScrollArea>
                                    </div>
                                </TabsContent>

                            </Tabs>

                        </div>

                    </CollapsibleContent>

                </Collapsible>

            </Card>

        </RndComponent>
    )
}

export default ObjectPanel