import { useQuery } from "react-query"
import { Skeleton } from "@chakra-ui/react"

import { getVariantPromoByCategory } from "~/services/productVariant"

import { useModalStore } from "../stores/useModalStore"
import ProductPromoCard from "./Card"

import { IProductDetail } from '~/types/product';
type Props = {
  product: IProductDetail
}
const ProductPromoModalContent = ({product}:Props) => {
  const { activeTab, variantId } = useModalStore()

  const promotionsQuery = useQuery(
    `variant-promo:${variantId}:${activeTab}`,
    async () => {
      if (!variantId) return

      return getVariantPromoByCategory(variantId, activeTab)
    },
  )

  const promotions = promotionsQuery.data

  return (
    <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[70vh] max-h-[70vh]'>
      <div className="grid grid-cols-1 gap-y-6 pb-6">
        {promotions?.data.map((promo) => (
          <ProductPromoCard key={promo.id} promotion={promo} product={product} />
        ))}
        {promotions?.data.length === 0 && (
          <div className="py-10 rounded-lg h-fit text-center text-body-1 font-semibold text-gray-800 bg-gray-200">Belum ada promo pada kategori ini</div>
        )}
      </div>
    </Skeleton>
  )
}

export default ProductPromoModalContent