'use client'
import Link from 'next/link';
import React, { useState } from 'react';
import { ChevronDown, Menu } from 'lucide-react';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible"
import Image from 'next/image';


const DashboardSidebar = ({ menu }: { menu: any }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [isNestedOpen, setIsNestedOpen] = useState(false);

    const toggleDrawer = () => {
        setIsOpen(!isOpen);
    };

    const MenuItem = ({ href, title, active, icon }: { href: string, title?: string, icon?: React.ReactNode, active?: boolean }) => {
        return (
            <Link onClick={() => setIsOpen(false)} href={`/dashboard${href}`} className={`py-1 flex items-center gap-2 text-sm ${active ? `border-r-4 border-white` : ""} ${!isOpen ? "mx-auto" : "px-5"}`}>
                {icon}  {isOpen && title}
            </Link>
        )
    }
    const NestedMenuItem = ({ menu, title, active, icon }: { menu: any, title?: string, icon: React.ReactNode, active?: boolean }) => {
        return (
            <>
                <Collapsible
                    open={isNestedOpen && isOpen}
                    onOpenChange={setIsNestedOpen}
                    className="w-[350px] space-y-2"
                >
                    <CollapsibleTrigger asChild>
                        <div className={`py-1 flex items-center gap-2 px-5 text-sm ${active ? `border-r-4 border-white` : ""}`}>
                            {icon}  {isOpen && <div className='flex justify-between items-center'>{title} <ChevronDown className='size-5' /></div>}
                        </div>
                    </CollapsibleTrigger>
                    <CollapsibleContent className="space-y-2 px-2 !text-xs ml-3">
                        {
                            menu?.map((menuitem: any) => (
                                <MenuItem key={menuitem?.title} href={menuitem?.href} title={menuitem?.title} />
                            ))
                        }
                    </CollapsibleContent>
                </Collapsible>

            </>
        )
    }
    return (
        <div className="">
            <div
                className={`absolute md:relative rounded-r-xl primary min-w-12 min-h-80 h-min inset-y-10 left-0 z-20 bg-white shadow-2xl transform transition-transform ease-in-out duration-300 
                ${isOpen ? ' max-w-48' : ' max-w-16 relative'}`}
            >
                {/* Drawer content */}
                <div className="py-4">
                    <button
                        className={`cursor-pointer absolute -right-3 bg-white rounded-lg p-1`}
                        onClick={toggleDrawer}
                        aria-label={isOpen ? 'Close drawer' : 'Open drawer'}
                    >
                        <Menu className='size-6 text-primary border-2 p-1 border-primary rounded-full' />
                    </button>

                    <div className='flex flex-col text-white py-10 space-y-2 '>
                        {
                            menu?.map((menuItem: any) => (
                                (menuItem?.children && menuItem?.children?.length > 0) ?
                                    <NestedMenuItem key={menuItem?.title} icon={<Image src={menuItem?.icon} className='size-5' width={20} height={20} alt='' />} menu={menuItem?.children} title={menuItem?.title} />
                                    :
                                    <MenuItem key={menuItem?.title} icon={<Image src={menuItem?.icon} className='size-5' width={20} height={20} alt='' />} href={menuItem?.href} title={menuItem?.title} />
                            ))
                        }
                    </div>
                </div>
            </div>
        </div >
    );
};

export default (DashboardSidebar);