import { LoadingBox } from "@/component/Common/LoadingBox"
import { useGetMyKuisine } from "@/hook/useKuisine"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Divider, Flex } from "antd"
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 CreateKuisineModal from "./create-modal"

const ProfileKuisineList: FC = () => {
  const [showCreateModal, setShowCreateModal] = useState<boolean>(false)
  const handleToggleModal = () => setShowCreateModal((prev) => !prev)
  const [query, setQuery] = useState({ pageNum: 1, pageSize: 40 })
  const { data: myKuisines, isLoading, refetch } = useGetMyKuisine(query, !showCreateModal)
  const ref = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>
  const { events } = useDraggable(ref)
  //
  const dataMyKuisine = useMemo(() => {
    return myKuisines?.data?.kuisines
  }, [myKuisines?.data?.kuisines, myKuisines?.data?.total_pages])
  //
  return (
    <Fragment>
      <Flex
        vertical
        gap={16}>
        <Flex
          align="center"
          gap={16}
          wrap>
          <div>
            <p className="text-lg font-bold">My Kuisine</p>
            <p className="text-sm font-semibold">{dataMyKuisine?.length} 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 Kuisine
          </Button>
        </Flex>
        {isLoading && <LoadingBox />}
        <div
          ref={ref}
          {...events}
          className="flex gap-4 items-center flex-shrink-0 overflow-x-scroll">
          {dataMyKuisine?.map((item) => {
            return (
              <FeedItem
                type="kuisine"
                key={item.id}
                id={item.id}
                bgImageUrl={item.picture1 || item.picture2}
                categoryName={item.category?.name || ""}
                updateUrl={`/kuisine/update-kuisine/${item.id}`}
                detailUrl={`/kuisine/${item.category?.id}/${item.id}`}
                seen={item.views}
                booked={Number(item.noofseats) - item.available_seats}
                commentApproval={item?.unapproved_comment_count || 0}
                onRefetch={refetch}
              />
            )
          })}
        </div>
        {!isLoading && !Boolean(dataMyKuisine?.length) && <EmptyList onClick={handleToggleModal} />}
      </Flex>
      {showCreateModal && (
        <CreateKuisineModal
          show={showCreateModal}
          onClose={handleToggleModal}
        />
      )}
    </Fragment>
  )
}
export default ProfileKuisineList