"use client"

import { List } from "antd"
import { find } from "lodash"
import { AllBookCss } from "./style"
import classNames from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
import { useTranslations } from "next-intl"
import CardItemBook from "../ItemBook"
import { useRecoilState } from "recoil"
import { categoryBookState } from "@/recoil"
import NotFoundBox from "@/component/Notfound"
import { useEffect, useState } from "react"
import { useListBook } from "@/hook/useBooks"
import { PAGINATION } from "@/config/constant"
import { IBookItem } from "@/type/Books"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import { useSearchParams } from "next/navigation"
import { useRouter } from "@/i18n/routing"
import { LoadingBox } from "@/component/Common/LoadingBox"
dayjs.extend(relativeTime)

type IProps = {
  categories: Array<any>
}

export default function ContentAllBooks({ categories }: IProps) {
  const trans = useTranslations("book")
  const searchParams = useSearchParams()
  const router = useRouter()
  const [selectedKey, setSelectedKey] = useRecoilState(categoryBookState)
  const transMusic = useTranslations("music")
  const [page, setPage] = useState(PAGINATION.DEFAULT_CURRENT_PAGE)
  const [totalPage, setTotalPage] = useState(0)
  const [query, setQuery] = useState<any>({
    pageNum: page,
    pageSize: PAGINATION.DEFAULT_PAGE_SIZE,
  })
  const { data: bookData, isLoading } = useListBook(query)
  const [books, setBooks] = useState<IBookItem[]>([])

  useEffect(() => {
    if (categories?.length && !selectedKey) {
      setSelectedKey(categories[0]?.id)
    }
  }, [categories])

  useEffect(() => {
    if (searchParams && searchParams.get("search")) {
      if (selectedKey) setSelectedKey("")
      else {
        setPage(1)
        const newQuery = { ...query, search: searchParams.get("search"), pageNum: 1 }
        delete newQuery.categoryId
        setQuery(newQuery)
      }
    } else if (searchParams && searchParams.get("categoryId")) {
      const categoryId = searchParams.get("categoryId") || ""
      const cate = find(categories, { id: categoryId })
      if (cate) {
        setSelectedKey(categoryId)
      }
    }
    
  }, [searchParams])

  useEffect(() => {
    setPage(1)
    const newQuey: any = { pageNum: 1, pageSize: PAGINATION.DEFAULT_PAGE_SIZE, categoryId: selectedKey }
    const params = new URLSearchParams(searchParams)
    if (selectedKey) {
      params.set("categoryId", selectedKey)
      const cate = find(categories, { id: selectedKey })
      if (cate) params.delete("search")
      else params.delete("categoryId")
    } else {
      delete newQuey.categoryId
      params.delete("categoryId")
      if (searchParams.get("search")) {
        newQuey.search = searchParams.get("search")
      } else {
        params.delete("search")
      }
    }
    
    setQuery(newQuey)
    router.push(`?${params.toString()}`, { scroll: false })
  }, [selectedKey])

  const renderLabelTab = (title: string, clicked: boolean) => {
    return (
      <div
        className={`max-h-[66px] h-[66px] pl-4 pr-3 text-sm flex md:py-2 lg:py-4 justify-between items-center w-[15rem] lg:w-full rounded-lg border border-solid border-[var(--secondary-20)] ${
          clicked ? "text-white bg-[var(--secondary-100)]" : "text-[var(--secondary-100)] bg-[var(--secondary-10)]"
        }`}>
        <div className="text-sm flex items-center">
          <span className="font-weight">{title}</span>
        </div>
        <div>
          <FontAwesomeIcon icon={faAngleRight} />
        </div>
      </div>
    )
  }

  useEffect(() => {
    if (bookData?.data) {
      setTotalPage(bookData?.data?.total_pages)
      if (page === 1) setBooks(bookData?.data?.books)
      else setBooks([...books, ...bookData?.data?.books])
    } else {
      setTotalPage(0)
      setPage(1)
      setBooks([])
    }
  }, [bookData])

  const handleScroll = (e: any) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (scrollTop + clientHeight >= scrollHeight - 5) {
      if (page < totalPage && !isLoading) {
        setPage(page + 1)
        setQuery({ ...query, pageNum: page + 1 })
      }
    }
  }

  useEffect(() => {
    const mainElement = document.getElementById("layout-content")

    const handleScroll = () => {
      if (mainElement) {
        const { scrollTop, scrollHeight, clientHeight } = mainElement
        if (scrollTop + clientHeight >= scrollHeight - 5) {
          if (page < totalPage && !isLoading) {
            setPage(page + 1)
            setQuery({ ...query, pageNum: page + 1 })
          }
        }
      }
    }

    if (mainElement) {
      mainElement.addEventListener("scroll", handleScroll)
    }

    return () => {
      if (mainElement) {
        mainElement.removeEventListener("scroll", handleScroll)
      }
    }
  }, [])

  const handleSelectCate = (cate: any) => {
    setSelectedKey(cate?.id)
  }

  return (
    <div className={classNames("h-full grow overflow-y-auto lg:flex", AllBookCss)}>
      <List
        className={classNames("min-w-[15rem] xl:min-w-[17.5rem] !m-5 lg:!mr-4 overflow-hidden flex flex-col custom_list")}
        header={<h3 className="text-lg lg:text-xl xl:text-2xl leading-[30px] h-12 xl:h-[52px] font-bold w-full flex items-center">{trans("categories")}</h3>}
        bordered
        dataSource={categories}
        renderItem={(item) => (
          <List.Item
            key={item?.id}
            className="py-1 !px-2 w-[15rem] lg:w-full"
            onClick={() => handleSelectCate(item)}>
            {renderLabelTab(item?.name, selectedKey === item?.id)}
          </List.Item>
        )}
      />
      <div className="mx-5 mb-5 mt-0 lg:mt-5 lg:ml-0 w-auto md:w-full">
        <div className="h-full flex flex-col rounded-lg border border-solid border-[var(--secondary-20)">
          <div className="flex justify-between items-center border-b-[1px] boder-solid border-[var(--secondary-20)]">
            <h2 className="text-[var(--secondary-100)] font-bold text-lg lg:text-xl xl:text-2xl py-4 px-4 border-b-[1px] boder-solid border-[var(--secondary-20)]">
              {find(categories, { id: selectedKey as string })?.name || ""}
            </h2>
          </div>
          {isLoading && !books?.length ? (
            <LoadingBox icon="/img/gif/Book.gif" />
          ) : books?.length ? (
            <div
              className="overflow-y-auto"
              onScroll={handleScroll}>
              <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2 py-4 md:px-4">
                {books?.map((item: any) => (
                  <CardItemBook
                    key={item?.id}
                    keyProps={item?.id}
                    type={item?.sell_type}
                    url={`/books/${item?.id}`}
                    url_image={item?.picture1}
                    alt_image={item?.title}
                    title={item?.title}
                    className="col-span-1"
                    createdAt={dayjs.unix(item.created).fromNow()}
                    author={`by ${item?.author}`}
                    rate={item.avg_rating}
                    price={item.price ? Number(item.price) : 0}
                    classNameCover="mb-2"
                    classNameTitle="line-clamp-2 text-sm leading-[20px] h-[40px] text-[var(--book--text-color)] font-semibold"
                    classNamePrice="text-sm font-semibold mt-[2px]"
                    classNameAuthor="text-xs"
                  />
                ))}
              </div>
              {isLoading && <LoadingBox />}
            </div>
          ) : (
            <NotFoundBox
              className="!bg-[var(--secondary-10)] py-8 rounded-lg"
              backHome={false}
              message={transMusic("we_found_nothing_here")}
            />
          )}
        </div>
      </div>
    </div>
  )
}