"use client";

import ChevronDownIcon from "@/public/icons/ChevronDownIcon";
import MoonIcon from "@/public/icons/MoonIcon";
import SearchIcon from "@/public/icons/SearchIcon";
import SunIcon from "@/public/icons/SunIcon";
import XIcon from "@/public/icons/XIcon";
import fetcher from "@/utils/fetcher";
import Link from "next/link";
import { Fragment, useState } from "react";
import { IoIosArrowDown } from "react-icons/io";
import useSWR from "swr";
import { useRouter } from "next/navigation";
import Image from "next/image";
import logo2 from "@/public/images/logo2.svg"
import BottomNavBar from "../navBar/BottomNavBar";




type HandleSidebar = () => void;
type HandleTheme = () => void;

interface SideBarProps {
  handleSidebar: HandleSidebar;
 
}

type SubCategory = {
  menu_lavel: string;
  slug: string;
  menu_content_id: number;
};

type CategoryItem = {
  menu_lavel: string;
  slug: string;
  menu_content_id: number;
  categorieslevelone: SubCategory[];
};

type CategoryData = CategoryItem[];

const SideBar = ({ handleSidebar}: SideBarProps) => {
  const {
    data,
    error,
    isLoading,
  }: { data: CategoryData; error: any; isLoading: boolean } = useSWR(
    "/category-list",
    fetcher
  );

  console.log(data, " sidebar")
  const [searchText, setSearchText] = useState("");
  
  const router = useRouter();
  const handleSearchItem = (e: any) => {
    // Prevent the default form submission behavior
    e.preventDefault();

    // Construct the search query URL based on the provided search text
    const searchQuery = `/search?search_slug=${searchText}`;
    if (!searchText.trim()) return
    setSearchText("")
    handleSidebar()

    // Use the router to navigate the user to the search results page with the constructed query
    router.replace(searchQuery);

   
    
  };

  console.log(data,"sidebar")
  let content;

  if (error) content = <div>There was an Error!</div>;
  if (isLoading) content = <div>Loading.....</div>;
  if (data)
    content = (
      <ul>
        {data?.slice(0,14)?.map((itm, i) => {
          const { menu_lavel, menu_content_id, slug, categorieslevelone } = itm;
          return (
            <Fragment key={menu_content_id}>
              {categorieslevelone.length > 0 ? (
                <li className="border-b-[1px] last:border-none">
                  <details className="group [&amp;_summary::-webkit-details-marker]:hidden select-none">
                    <summary className="flex cursor-pointer items-center flex-row justify-between text-gray-900">
                      <Link
                        className="px-2 py-3 text-lg md:text-base block w-[85%] group-open:bg-gray-50 group-open:dark:bg-[#3f3f40] hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
                        href={`/${slug}`}
                        onClick={handleSidebar}
                      >
                        {menu_lavel}
                      </Link>
                      <div className="shrink-0 hover:bg-gray-100 dark:text-white group-open:bg-gray-50 group-open:dark:bg-[#3f3f40] dark:hover:bg-gray-700 w-[15%] justify-center h-full flex items-center py-[14px]">
                        <span className="transition duration-300 group-open:-rotate-180">
                         <IoIosArrowDown className=" rotate-180  transition-all group-hover:rotate-0" />
                        </span>
                      </div>
                    </summary>
                    <div className="flex flex-col group-open:bg-gray-200 dark:group-open:bg-gray-600">
                      {categorieslevelone.map((sitm) => {
                        const { menu_content_id, menu_lavel, slug } = sitm;
                        return (
                          <Link
                            key={menu_content_id}
                            className="flex items-center pl-5 pr-2 py-3 text-lg md:text-base text-gray-900 hover:bg-gray-100 border-t-[1px] dark:text-white dark:hover:bg-gray-700"
                            href={`/${slug}`}
                            onClick={handleSidebar}
                          >
                            {menu_lavel}
                          </Link>
                        );
                      })}
                    </div>
                  </details>
                </li>
              ) : (
               
                <li className="border-b-[1px] last:border-none">
                  <Link
                    className="flex items-center px-2 py-3 text-lg md:text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
                    href={`/${slug}`}
                    onClick={handleSidebar}
                  >
                    {menu_lavel}
                  </Link>
                </li>
              )}
            </Fragment>
          );
        })}
      </ul>
    );

  return (
    <div className="fixed top-0 h-screen w-screen flex flex-row justify-start z-[12]">
      <div
        className="cursor-pointer"
        
      ></div>
      <div
        className="h-screen  bg-white dark:bg-[var(--dark)] flex flex-col fixed right-0 w-full"
        style={{ transition: "width 300ms cubic-bezier(0.2, 0, 0, 1) 0s" }}
      >
        <div className="flex justify-between md:justify-end items-center py-4 px-2">
          {/* <div className="p-3 last:pr-0 lg:hidden">
            <button className="flex" aria-label="theme" onClick={handleTheme}>
              {theme === "light" ? (
                <MoonIcon />
              ) : (
                <SunIcon cls="dark:stroke-white" />
              )}
            </button>
          </div> */}
          <div className=" md:hidden ">
        <Link
        href="/"
        onClick={handleSidebar}>
          
      <Image src={logo2} alt="logo-image"width={80}height={60}/>
      
      </Link>
      </div>
          <div className="rounded-[5px] sticky md:hidden  top-[70px] z-50 border w-[190px] mb-1  ">
   
   <div className="container pr-5">
     <form className="flex items-center"  onSubmit={handleSearchItem}>
     <button
         type="submit"
         className="pl-3 last:pr-0"
       >
         <SearchIcon clss="" />
       </button>
       <input
         type="text"
         className="w-full py-2 px-4 text-[var(--dark)] dark:text-white focus:outline-none focus:bottom-0"
         placeholder="Search....."
         value={searchText}
         onChange={(e: any) => setSearchText(e.target.value)}
       />
       <button
            type="button"
            className="w-10 h-10 text-center text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
            onClick={handleSidebar}
          >
            <XIcon />
            <span className="sr-only">বন্ধ করুন</span>
          </button>
     </form>
   {/* </div> */}
 </div>
 </div>

          
        </div>
        <div className="mx-2 py-4 overflow-y-auto sidebar-scrollbar-none">
          {content}
        </div>
        <div className="bg-white h-[120px] w-full"></div>
        {/* <BottomNavBar /> */}
      </div>
    </div>
  );
};

export default SideBar;