import { LoadingBox } from "@/component/Common/LoadingBox"
import { PAGINATION } from "@/config/constant"
import { useGetMyBook } from "@/hook/useBooks"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Divider, Flex } from "antd"
import { FC, Fragment, useRef, useState } from "react"
import { useDraggable } from "react-use-draggable-scroll"
import FeedItem from "../feed-item"
import EmptyList from "../feed-item/empy-list"
import CreateBookModal from "./create-modal"

const ProfileBookList: FC = () => {
  const [query] = useState({ pageNum: PAGINATION.DEFAULT_CURRENT_PAGE, pageSize: 40 })
  const [showCreate, setShowCreate] = useState<boolean>(false)
  const { data: dataBook, isLoading, refetch } = useGetMyBook(query, !showCreate)
  const handleToggleModal = () => setShowCreate((prev) => !prev)
  const ref = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>
  const { events } = useDraggable(ref)
  return (
    <Fragment>
      <Flex
        vertical
        gap={16}>
        <Flex
          align="center"
          gap={16}
          wrap>
          <div>
            <p className="text-lg font-bold">My Books</p>
            <p className="text-sm font-semibold">{dataBook?.data?.books.length || 0} posts</p>
          </div>
          <Divider
            type="vertical"
            className="!bg-gray-50 !h-10"
          />
          <div>
            <p className="text-sm font-semibold">
              Available time: <span className="text-sm text-gray-50 font-normal">24 hours</span>
            </p>
            <p className="text-sm font-semibold">
              Used time: <span className="text-sm text-gray-50 font-normal">16 hours</span>
            </p>
          </div>
          <Button
            onClick={handleToggleModal}
            size="large"
            type="primary"
            variant="filled"
            className="!bg-black ml-auto"
            icon={<PlusOutlined className="!text-lg !text-gray-100" />}>
            Post Book
          </Button>
        </Flex>
        {isLoading && <LoadingBox />}
        <div
          ref={ref}
          {...events}
          className="flex gap-4 items-center flex-shrink-0 overflow-x-scroll">
          {dataBook?.data?.books?.map((item) => {
            return (
              <FeedItem
                type="book"
                key={item.id}
                id={item.id}
                bgImageUrl={item.thumbnail || item.picture1 || item.picture2 || item.picture3 || item.picture4}
                categoryName={item.category?.name || ""}
                updateUrl={`/books/update-book/${item.id}`}
                detailUrl={`/books/${item.id}`}
                seen={item.views}
                commentApproval={item?.unapproved_comment_count || 0}
                onRefetch={refetch}
              />
            )
          })}
        </div>
        {!isLoading && !Boolean(dataBook?.data?.books.length) && <EmptyList onClick={handleToggleModal} />}
      </Flex>
      <CreateBookModal
        show={showCreate}
        onClose={handleToggleModal}
      />
    </Fragment>
  )
}
export default ProfileBookList