"use client"

import React, { useEffect, useState } from "react"
import { find } from "lodash"
import { useRecoilValue } from "recoil"
import { typeBookState } from "@/recoil"
import SearchBox from "@/component/Layout/SearchBox"
import { useTranslations } from "next-intl"
import { bookOptions } from "@/config/constant"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import ContentAllBooks from "./Content"
import { useRouter } from "@/i18n/routing"
import { useSearchParams } from "next/navigation"

type IProps = {
  categories: Array<any>
}

const AllBooks = ({ categories }: IProps) => {
  const trans = useTranslations("book")
  const searchParams = useSearchParams()
  const options = bookOptions()
  const [searchValue, setSearchValue] = useState(searchParams.get("search") || "")
  const typeBook = useRecoilValue(typeBookState)
  const router = useRouter()

  const handleSearchKeyword = (keyword: string) => {
    const params = new URLSearchParams(searchParams)
    if (keyword) params.set("search", keyword)
    else params.delete("search")
    router.push(`?${params.toString()}`, { scroll: false })
  }

  useEffect(() => {
    setSearchValue(searchParams.get("search") || "")
  }, [searchParams])

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: "All Book",
            href: "#",
            title: find(options, { value: typeBook as string })?.label || "",
          },
        ]}
        slot={
          <div>
            <SearchBox
              value={searchValue}
              onSearch={handleSearchKeyword}
              onChange={setSearchValue}
              placeholder={trans("search")}
              className="h-12"
              classInput="!h-12 lg:!w-56 xl:!w-56"
              classButton="!h-12 md:!pl-2"
            />
          </div>
        }
        showButton={false}
      />
      <ContentAllBooks categories={categories} />
    </div>
  )
}

export default AllBooks