"use client";

import { SORT, SortOrderTypes } from "@/utils/constants";
import { createUrl } from "@/utils/helper";
import { Select, SelectItem } from "@heroui/select";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { FC } from "react";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerBody
} from "@heroui/drawer";
import { Button } from "@heroui/button";
import { useDisclosure } from "@heroui/use-disclosure";
import { SortIcon } from "@components/common/icons/SortIcon";



const SortOrder: FC<{
  sortOrders: SortOrderTypes[];
  title: string;
}> = ({ sortOrders }) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const sort = searchParams.get(SORT) || "name-asc";

  const { isOpen, onOpen, onOpenChange } = useDisclosure();


  const handleSortChange = (value: string) => {
    const newParams = new URLSearchParams(searchParams.toString());

    if (value) newParams.set(SORT, value);
    const newUrl = createUrl(pathname, newParams);

    router.replace(newUrl);
  };



  const clearFilters = () => {
    const q = searchParams.get("q");
    const newParams = new URLSearchParams();
    if (q) newParams.set("q", q);
    router.replace(createUrl(pathname, newParams));
    onOpenChange();
  };

  return (
    <>
     
      {/* Mobile View Toggle */}
      <div className="flex flex-wrap gap-3">
        <Button
          size="md"
          variant="flat"
          className="bg-neutral-100 dark:bg-neutral-800"
          onPress={onOpen}
        >
          <SortIcon />
          <span className="font-outfit text-base tracking-wide"> Sort</span>
        </Button>
      </div>

      {/* Mobile Bottom Sheet */}
      <Drawer
        isOpen={isOpen}
        placement="bottom"
        onOpenChange={onOpenChange}
        hideCloseButton
      >
        <DrawerContent className="rounded-t-[32px] dark:bg-neutral-900">
          {(_onClose) => (
            <>
              <DrawerHeader className="flex flex-col gap-1 pb-4 pt-2">
                <div className="mx-auto h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-700" />
                <div className="flex items-center justify-between mt-2 px-2">
                  <h2 className="text-2xl font-bold tracking-tight">Sort</h2>
                  <div className="flex items-center gap-4">
                    {Array.from(searchParams.keys()).some((key) => key !== "q") && (
                      <button
                        onClick={clearFilters}
                        className="text-sm font-medium underline underline-offset-4 text-neutral-600 dark:text-neutral-400"
                      >
                        Clear all filters
                      </button>
                    )}
                    
                  </div>
                </div>
              </DrawerHeader>
              <DrawerBody className="px-6 pb-12 pt-2">
                <div className="flex flex-col gap-4">
                  <p className="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                    Sort By
                  </p>
                  <Select
                    aria-label="Sort options"
                    selectedKeys={[sort]}
                    className="w-full"
                    variant="flat"
                    size="lg"
                    classNames={{
                      value: "text-neutral-800 dark:text-neutral-200",
                      trigger: "dark:bg-neutral-800",
                    }}
                    onSelectionChange={(e) => {
                      handleSortChange(e.currentKey as string);
                      onOpenChange();
                    }}
                  >
                    {sortOrders.map((order) => (
                      <SelectItem
                        key={order.value}
                        textValue={order.title}
                        className="text-neutral-800 dark:text-neutral-200"
                      >
                        {order.title}
                      </SelectItem>
                    ))}
                  </Select>
                </div>
              </DrawerBody>
            </>
          )}
        </DrawerContent>
      </Drawer>
    </>
  );
};

export default SortOrder;
