"use client"

import React, { useEffect, useState } from "react"
import { find } from "lodash"
import { useRecoilValue } from "recoil"
import { useTranslations } from "next-intl"
import dayjs from "dayjs"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { Dropdown, Modal } from "antd"
import type { MenuProps } from "antd"
import Image from "next/image"
import classNames from "classnames"
import relativeTime from "dayjs/plugin/relativeTime"

import CardItemBook from "../ItemBook"
import { bookOptions, PAGINATION } from "@/config/constant"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { Link, useRouter } from "@/i18n/routing"
import { MyBookCss } from "./style"
import { useDeleteBook, useGetMyBook, useRePostBook } from "@/hook/useBooks"
import NotFoundBox from "@/component/Notfound"
import NotifyCustom from "@/component/Common/NotifyCustom"
import { INotiRequest } from "@/type/Common"
import { typeBookState } from "@/recoil"
import { LoadingBox } from "@/component/Common/LoadingBox"

dayjs.extend(relativeTime)

const MyBooks = () => {
  const [modal, modalContextHolder] = Modal.useModal()
  const router = useRouter()

  const trans = useTranslations("book")
  const transButton = useTranslations("button")
  const transMessage = useTranslations("message")
  const transGeneral = useTranslations("general")
  const transMusic = useTranslations("music")

  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 [activeButtons, setActiveButtons] = useState<any>("")
  const [openNotify, setOpenNotify] = useState(false)
  const [messageNotify, setMessageNotify] = useState<INotiRequest>({
    type: "error",
    message: "",
    description: "",
  })

  const { data: dataBook, isLoading, refetch } = useGetMyBook(query)
  const deleteBook = useDeleteBook()
  const rePostBook = useRePostBook()

  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 handleRePostBook = () => {
    rePostBook
      .mutateAsync(activeButtons)
      .then((res) => {
        if (res?.status === 200) {
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("repost_successful"),
          })
          setOpenNotify(true)
          if (page === 1) refetch()
          else {
            setPage(1)
            setQuery({ ...query, pageNum: 1 })
          }
        }
      })
      .catch((errors) => {
        setMessageNotify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
        setOpenNotify(true)
      })
  }

  const handleDeleteBook = () => {
    deleteBook
      .mutateAsync(activeButtons)
      .then((res: any) => {
        if (res?.status === 200) {
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("deleted_successfully"),
          })
          setOpenNotify(true)
          if (page === 1) refetch()
          else {
            setPage(1)
            setQuery({ ...query, pageNum: 1 })
          }
        }
      })
      .catch((errors) => {
        setMessageNotify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
        setOpenNotify(true)
      })
  }

  const confirmDelete = () => {
    modal.confirm({
      title: transGeneral("confirm_delete"),
      okText: transButton("ok"),
      cancelText: transButton("cancel"),
      onOk() {
        handleDeleteBook()
      },
    })
  }

  const buttonTopRight = (book: any, className?: string) => {
    const isExpired = book?.expirydate ? dayjs().isAfter(dayjs.unix(Number(book.expirydate))) : false

    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("edit"), "/img/icon/edit.svg", "edit"),
        key: "1",
        onClick: () => {
          router.push(`/books/update-book/${activeButtons}`)
        },
      },
      ...(isExpired
        ? [
            {
              label: renderLabel(trans("repost"), "/img/icon/refresh.svg", "refresh"),
              key: "2",
              onClick: () => handleRePostBook(),
            },
          ]
        : []),
      {
        label: renderLabel(trans("delete"), "/img/icon/trash_outline.svg", "trash_outline"),
        key: "3",
        onClick: () => confirmDelete(),
      }
    ]

    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("", MyBookCss) }}
        trigger={["click"]}>
        <button onClick={() => handleButtonClick(book.id)}>
          <Image
            src={"/img/icon/ellipsis_vertical_sharp.svg"}
            alt={"esllipsis vertical"}
            width={24}
            height={24}
            style={{
              width: "100%",
            }}
          />
        </button>
      </Dropdown>
    )
  }

  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)
      }
    }
  }, [])

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: "My Book",
            href: "#",
            title: find(options, { value: typeBook as string })?.label || "",
          },
        ]}
        slot={
          <div>
            <Link
              aria-label="add Book"
              href={"books/add-book"}
              className="rounded-lg border border-solid border-[var(--primary--70)] px-4 py-[14px] font-bold bg-[var(--primary--70)] !text-white text-base hover:opacity-80 whitespace-nowrap">
              <FontAwesomeIcon icon={faPlus} />
              {" Post Books"}
            </Link>
          </div>
        }
        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}
                decs={item?.decs}
                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}
                buttonTopRight={buttonTopRight(item, "top-0 right-0 hidden md:flex")}
                buttonTopRightHozizontal={buttonTopRight(item, "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")}
        />
      )}
      {modalContextHolder}
      <NotifyCustom
        type={messageNotify.type}
        message={messageNotify.message}
        description={messageNotify.description}
        isOpen={openNotify}
        onclose={() => setOpenNotify(false)}
      />
    </div>
  )
}

export default MyBooks