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

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