"use client";

import * as React from "react";
import Link from "next/link";

import { useMediaQuery } from "@react-hook/media-query";
import { useState } from "react";
import { BreadcrumbPage } from "./breadcrumb";
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../../lib/utils"

const BrdcrbVariants = cva(
  "",
    {
    variants:{
      variant:{
        primary:"text-primary",
        secondary:'text-secondary-foreground',
      },
    }
  }
)

import DropDownMenu from "../Dropdown/DropDownMenu";

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerTrigger,
} from "./drawer";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "./breadcrumb";
import { Button } from "../Button/button";
import {
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "./drawer";

interface Item {
  href: string;
  label: string;
}

interface BreadcrumbProps {
  items: Item[];
  ITEMS_TO_DISPLAY: number;
}

export function BreadcrumbResponsive({
  items,
  ITEMS_TO_DISPLAY,
  variant
}: BreadcrumbProps & VariantProps<typeof BrdcrbVariants>){
  if (ITEMS_TO_DISPLAY <= 1) {
    throw new Error("ITEMS_TO_DISPLAY must be greater than 1.");
  }
  
  const [open, setOpen] = React.useState(false);
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
  const [selectedItemIndex1, setSelectedItemIndex1] = useState(-1);

  const handleItemClick = (index: number) => {
    setSelectedItemIndex(index);
    setSelectedItemIndex1(-99);
    setOpen(false);
  };

  const handleItemClick1 = (index: number) => {
    setSelectedItemIndex1(index);
    setSelectedItemIndex(-99);

    setOpen(false);
  };

  return (
    <Breadcrumb>
      <BreadcrumbList className={cn(BrdcrbVariants({variant}))}>
        <BreadcrumbItem>
          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        {items.length > ITEMS_TO_DISPLAY ? (
          <>
          
            <BreadcrumbItem>
              {isDesktop ? (
                <DropDownMenu
                  open={open}
                  onOpenChange={setOpen}
                  items={items}
                  search={true}
                  ITEMS_TO_DISPLAY={ITEMS_TO_DISPLAY}
                  icon={<BreadcrumbEllipsis/>}
                />
              ) : (
                <Drawer open={open} onOpenChange={setOpen}>
                  <DrawerTrigger aria-label="Toggle Menu">
                    <BreadcrumbEllipsis className="h-4 w-4" />
                  </DrawerTrigger>
                  <DrawerContent>
                    <DrawerHeader className="text-left">
                      <DrawerTitle>Navigate to</DrawerTitle>
                      <DrawerDescription>
                        Select a page to navigate to.
                      </DrawerDescription>
                    </DrawerHeader>
                    <div className="grid gap-1 px-4">
                      {items
                        .slice(1, -ITEMS_TO_DISPLAY + 1)
                        .map((item, index) => (
                          <Link
                            key={index}
                            href={item.href ? item.href : "#"}
                            className="py-1 text-sm"
                          >
                            {item.label}
                          </Link>
                        ))}
                    </div>
                    <DrawerFooter className="pt-4">
                      <DrawerClose asChild>
                        <Button variant="outline">Close</Button>
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        ) : null}
        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
          <>
            <BreadcrumbItem key={index}>
              {item.href ? (
                <>
                  <BreadcrumbLink
                    asChild
                    onClick={() => handleItemClick(index)}
                    className={`max-w-20 truncate md:max-w-none`}
                  >
                    <Link href={item.href}>{item.label}</Link>
                  </BreadcrumbLink>
                </>
              ) : (
                <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
                  {item.label}
                </BreadcrumbPage>
              )}
            </BreadcrumbItem>

            {index < ITEMS_TO_DISPLAY - 2 ? <BreadcrumbSeparator /> : <></>}
          </>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}
