"use client"

import React, { useEffect, useState } from "react"
import { find } from "lodash"
import { useRecoilValue } from "recoil"
import { typeBookState } from "@/recoil"
import { useTranslations } from "next-intl"
import CardItemBook from "../ItemBook"
import { bookOptions, PAGINATION } from "@/config/constant"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { useRouter } from "@/i18n/routing"
import { Dropdown, Spin } from "antd"
import type { MenuProps } from "antd"
import Image from "next/image"
import classNames from "classnames"
import { MyFavoriteBooksCss } from "./style"
import { useGetBookFavourites, useUnfavouriteBook } from "@/hook/useBooks"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSpinner } from "@fortawesome/free-solid-svg-icons"
import NotFoundBox from "@/component/Notfound"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import { LoadingBox } from "@/component/Common/LoadingBox"
dayjs.extend(relativeTime)

const MyFavoriteBooks = () => {
  const router = useRouter()
  const trans = useTranslations("book")
  const transButton = useTranslations("button")
  const options = bookOptions()
  const typeBook = useRecoilValue(typeBookState)
  const [page, setPage] = useState(PAGINATION.DEFAULT_CURRENT_PAGE)
  const [totalPage, setTotalPage] = useState(0)
  const [query, setQuery] = useState({ pageNum: page, pageSize: PAGINATION.DEFAULT_PAGE_SIZE })
  const { data: dataBook, isLoading, refetch } = useGetBookFavourites(query)
  const transMusic = useTranslations("music")
  const unfavouriteBook = useUnfavouriteBook()

  const [activeButtons, setActiveButtons] = useState<any>("")

  const handleButtonClick = (index: string | number) => {
    setActiveButtons(index)
  }

  const renderLabel = (title: string, src_icon: string, alt_icon: string) => {
    return (
      <div className="text-base flex py-[19px] font-normal">
        <Image
          src={src_icon}
          alt={alt_icon}
          width={24}
          height={24}
        />
        <span className="pl-2 xl:pl-3">{title}</span>
      </div>
    )
  }

  const items: MenuProps["items"] = [
    {
      label: renderLabel(trans("go_detail"), "/img/icon/information_circle_outline.svg", "information_circle_outline"),
      key: "0",
      onClick: () => {
        router.push(`/books/${activeButtons}`)
      },
    },
    {
      label: renderLabel(trans("remove_from_favorite"), "/img/icon/broken_heart.svg", "broken_heart"),
      key: "2",
      onClick: () => handleUnfavouriteBook(),
    }
  ]

  const handleUnfavouriteBook = () => {
    unfavouriteBook.mutateAsync(activeButtons).then(() => {
      if (page === 1) refetch()
      else {
        setPage(1)
        setQuery({ ...query, pageNum: 1 })
      }
    })
  }

  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(() => {
    if (dataBook?.data) {
      setTotalPage(dataBook?.data?.total_pages)
    } else {
      setTotalPage(0)
      setPage(1)
    }
  }, [dataBook])

  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 buttonTopRight = (key: any, className?: string) => {
    return (
      <Dropdown
        className={`absolute w-[35px] h-[35px] rounded-[8px] flex justify-center items-center z-[11] shadow-lg bg-[var(--secondary-10)] ${className || ""}`}
        menu={{ items, className: classNames("", MyFavoriteBooksCss) }}
        trigger={["click"]}>
        <button onClick={() => handleButtonClick(key)}>
          <Image
            src={"/img/icon/ellipsis_vertical_sharp.svg"}
            alt={"esllipsis vertical"}
            width={24}
            height={24}
            style={{
              width: "100%",
            }}
          />
        </button>
      </Dropdown>
    )
  }

  const buttonTopleft = () => {
    return (
      <button className={`absolute top-0 left-0 w-[35px] h-[35px] flex justify-center items-center z-[11] shadow-lg`}>
        <Image
          src={"/img/icon/heart.svg"}
          alt={"esllipsis vertical"}
          width={24}
          height={24}
        />
      </button>
    )
  }

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: "My Book",
            href: "#",
            title: find(options, { value: typeBook as string })?.label || "",
          },
        ]}
        subtitle={`${dataBook?.data?.books.length || 0} ${dataBook?.data?.books && dataBook?.data?.books?.length > 0 ? trans("books") : trans("book")}`}
        showButton={false}
      />
      {isLoading && !dataBook ? (
        <LoadingBox icon="/img/gif/Book.gif" />
      ) : dataBook?.data?.books.length ? (
        <div
          className="overflow-y-auto"
          onScroll={handleScroll}>
          <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-2 p-4">
            {dataBook?.data?.books?.map((item: any) => (
              <CardItemBook
                key={item.id}
                keyProps={item?.id}
                type={item?.type}
                url={`/books/${item?.id}`}
                url_image={item?.picture1}
                alt_image={item?.title}
                title={item?.title}
                className="col-span-1 flex md:block"
                createdAt={dayjs.unix(item.created).fromNow()}
                author={`by ${item?.author}`}
                rate={item.avg_rating}
                price={item.price ? Number(item.price) : 0}
                buttonTopleft={buttonTopleft()}
                buttonTopRight={buttonTopRight(item?.id, "top-0 right-0 hidden md:flex")}
                buttonTopRightHozizontal={buttonTopRight(item?.id, "top-[12px] right-[10px] flex md:hidden")}
                classNameCover="md:mb-2 !w-[5rem] md:!w-full"
                classNameContent="pl-4 md:pl-0"
                classNameTitle="line-clamp-2 text-base md:text-sm leading-[22px] md:leading-[20px] h-auto md:h-[40px] max-h-[40px] md:max-h-none text-[var(--book--text-color)] font-bold md:font-semibold"
                classNamePrice="text-2xl md:text-sm font-medium md:font-semibold mt-[2px]"
                classNameAuthor="text-[10px] leading-[14px] md:text-xs"
                classNameDecs="h-[14px] mt-3 md:hidden"
              />
            ))}
          </div>
          {isLoading && <LoadingBox />}
        </div>
      ) : (
        <NotFoundBox
          className="!bg-[var(--secondary-10)] py-8 rounded-3xl"
          backHome={false}
          message={transMusic("we_found_nothing_here")}
        />
      )}
    </div>
  )
}

export default MyFavoriteBooks