import { Flex, Skeleton } from "antd"
import { FC, Fragment, useMemo, useRef } from "react"
import FeedItem from "../components/feed-item"
import { useDraggable } from "react-use-draggable-scroll"
import { useGetMarketList } from "@/hook/useMarket"
import { PAGINATION } from "@/config/constant"
import { flattenDeep } from "lodash"
import { useGetProfile } from "@/hook/useAuth"
import { LoadingBox } from "@/component/Common/LoadingBox"
const MarketList: FC = () => {
  const ref = useRef<HTMLElement>(null) as React.MutableRefObject<HTMLElement>
  const { events } = useDraggable(ref)
  const { data: user } = useGetProfile()
  const { data: marketListByCateID, isLoading } = useGetMarketList({ pageNum: 1, pageSize: PAGINATION.DEFAULT_PAGE_SIZE })
  const dataMarkets = useMemo(
    () =>
      flattenDeep(marketListByCateID?.pages.map((e: any) => e.marketListByCateID!)).length > 0
        ? flattenDeep(marketListByCateID?.pages.map((e: any) => e?.data?.data?.items))
        : [],
    [marketListByCateID?.pages],
  )

  return (
    <div>
      <h3 className="text-2xl font-bold mb-4">Market</h3>
      <Flex
        {...events}
        ref={ref}
        align="center"
        className="!overflow-x-auto no-scrollbar"
        gap={8}>
        {isLoading ? (
          <LoadingBox />
        ) : (
          dataMarkets.map((item, index) => (
            <Fragment key={index}>
              <FeedItem
                type="Market"
                bgImageUrl={item.picture1}
                authorName=""
                categoryName={item.category?.name || ''}
                createdDate={item.created}
                userInfo={item.user}
                view={item.views}
                currentUser={user?.data}
                detailUrl={`/market/${item.id}`}
              />
            </Fragment>
          ))
        )}
      </Flex>
    </div>
  )
}
export default MarketList