import React, { useEffect, useMemo, useState } from 'react'
import style from "./PromoCard.module.css"
import { ClockIcon, PlusIcon } from "lucide-react"
import { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
import formatCurrency from '~/common/libs/formatCurrency'
import PromoProduct from './PromoProduct'
import { Skeleton, Spinner } from '@chakra-ui/react'
import clsxm from '~/common/libs/clsxm'
import { useCountdown } from 'usehooks-ts'

type Props = {
  promotion: IPromotion
}

const PromoCard = ({ promotion }: Props) => {
  // TODO: useCountdown()
  const [products, setProducts] = useState<IProductVariantPromo[]>([])

  useEffect(() => {
    const getProducts = async () => {
      const datas = []
      for (const product of promotion.products) {
        const response = await fetch(`/api/product-variant/${product.product_id}`)
        const res = await response.json()
        res.data.qty = product.qty
        datas.push(res.data)
      }
      setProducts(datas)
    }

    getProducts()
  }, [promotion.products])

  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])

  useEffect(() => {
    const getFreeProducts = async () => {
      const datas = []
      for (const product of promotion.free_products) {
        const response = await fetch(`/api/product-variant/${product.product_id}`)
        const res = await response.json()
        res.data.qty = product.qty
        datas.push(res.data)
      }
      setFreeProducts(datas)
    }

    getFreeProducts()
  }, [promotion.free_products])

  const priceTotal = useMemo(() => {
    let total = 0;
    [...products, ...freeProducts].forEach((product) => {
      total += product.price.price_discount * product.qty
      console.log({ product });

    })
    return total
  }, [products, freeProducts])

  const countdownClass = {
    'text-white': true,
    'bg-[#312782]': promotion.type.value === 'bundling',
    'bg-[#329E44]': promotion.type.value === 'discount_loading',
    'bg-[#FAD147]': promotion.type.value === 'merchandise',
    'text-gray-700': promotion.type.value === 'merchandise',
  }

  return (
    <div className={style.card}>
      <div className={clsxm(style.countdownSection, countdownClass)}>
        <span>
          <ClockIcon size={20} />
        </span>
        <span>Berakhir dalam</span>
        <div className={style.countdown}>
          <span>00</span>
          <span>01</span>
          <span>35</span>
        </div>
      </div>

      <div className='px-4 mt-4 text-caption-1'>
        <div className={style.title}>{promotion.name}</div>

        <Skeleton className={style.productSection} isLoaded={[...products, ...freeProducts].length > 0}>
          {products.map((product) => <PromoProduct key={product.id} variant={product} />)}
          {freeProducts.map((product) => <PromoProduct key={product.id} variant={product} />)}
        </Skeleton>

        <div className={style.priceSection}>
          <div className={style.priceCol}>
            <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
              <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
              <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
            </Skeleton>

            <div className={style.priceRow}>
              <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
              <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
            </div>
          </div>
          <div>
            <button className={style.addToCartBtn}>
              {/* <PlusIcon size={16} /> */}
              <Spinner size='xs' mr={1.5} /> 
              Keranjang
            </button>
          </div>

        </div>
      </div>
    </div>
  )
}

export default PromoCard