import { LoadingBox } from "@/component/Common/LoadingBox"
import { useGetMineMarketList } from "@/hook/useMarket"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Divider, Flex} from "antd"
import { flattenDeep } from "lodash"
import { FC, Fragment, useMemo, useRef, useState } from "react"
import { useDraggable } from "react-use-draggable-scroll"
import FeedItem from "../feed-item"
import EmptyList from "../feed-item/empy-list"
import CreateMarketItem from "./create-modal"

const ProfileMarketList: FC = () => {
  const [showCreateModal, setShowCreateModal] = useState<boolean>(false)
  const { data, isLoading, refetch } = useGetMineMarketList(!showCreateModal)
  const handleToggleModal = () => setShowCreateModal((prev) => !prev)
  const ref = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>
  const { events } = useDraggable(ref)
  const dataMarkets = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.items)) : []),
    [data?.pages],
  )
  return (
    <Fragment>
      <Flex
        vertical
        gap={16}>
        <Flex
          align="center"
          gap={16}
          wrap>
          <div>
            <p className="text-lg font-bold">My W.Market</p>
            <p className="text-sm font-semibold">{dataMarkets.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 />}>
            Post Market
          </Button>
        </Flex>
        {isLoading && <LoadingBox />}
        <div
          ref={ref}
          {...events}
          className="flex gap-4 items-center flex-shrink-0 overflow-x-scroll">
          {dataMarkets.map((item) => {
            return (
              <FeedItem
                key={item.id}
                type="market"
                id={item.id}
                bgImageUrl={item.picture1 || item.picture2 || item.picture3}
                categoryName={item.category?.name || ""}
                updateUrl={`/market/update/${item.id}`}
                detailUrl={`/market/${item.id}`}
                seen={item.views}
                commentApproval={item?.unapproved_comment_count || 0}
                onRefetch={refetch}
              />
            )
          })}
        </div>
        {!isLoading && !Boolean(dataMarkets?.length) && <EmptyList onClick={handleToggleModal} />}
      </Flex>
      <CreateMarketItem
        show={showCreateModal}
        onClose={handleToggleModal}
      />
    </Fragment>
  )
}
export default ProfileMarketList