import { Flex } from "antd"
import { FC, Fragment, useRef } from "react"
import FeedItem from "../components/feed-item"
import { useDraggable } from "react-use-draggable-scroll"
import { useListBook } from "@/hook/useBooks"
import { PAGINATION } from "@/config/constant"
import { useGetProfile } from "@/hook/useAuth"
import { LoadingBox } from "@/component/Common/LoadingBox"

const BooksList: FC = () => {
  const ref = useRef<HTMLElement>(null) as React.MutableRefObject<HTMLElement>
  const { events } = useDraggable(ref)
  const { data: bookData, isLoading } = useListBook({ pageNum: 1, pageSize: PAGINATION.DEFAULT_PAGE_SIZE })
  const { data: user } = useGetProfile()
  return (
    <div>
      <h3 className="text-2xl font-bold mb-4">Books</h3>
      <Flex
        {...events}
        ref={ref}
        align="center"
        gap={8}
        className="!overflow-x-auto no-scrollbar">
        {isLoading ? (
          <LoadingBox />
        ) : bookData && bookData.data ? (
          bookData.data.books.map((item, index) => (
            <Fragment key={index}>
              <FeedItem
                bgImageUrl={item.picture1}
                type="Book"
                authorName={item.publisher}
                categoryName={item.category?.name || ""}
                createdDate={item.created}
                userInfo={item.user}
                view={item.views}
                currentUser={user?.data}
                detailUrl={`/books/${item.id}`}
              />
            </Fragment>
          ))
        ) : (
          <></>
        )}
      </Flex>
    </div>
  )
}
export default BooksList