import style from "../styles/card.module.css"

import React, { useEffect, useMemo, useState } from 'react'
import { InfoIcon, PlusIcon } from "lucide-react"
import { Skeleton, Tooltip } from '@chakra-ui/react'
import { motion } from "framer-motion"

import { PROMO_CATEGORY } from "~/constants/promotion"
import { getVariantById } from "~/services/productVariant"

import { IProductVariantPromo, IPromotion } from '~/types/promotion'
import formatCurrency from '~/libs/formatCurrency'
import clsxm from '~/libs/clsxm'

import ProductPromoItem from './Item'
import ProductPromoAddToCart from "./AddToCart"
import ProductPromoCardCountdown from "./CardCountdown"

type Props = {
  promotion: IPromotion
}

const ProductPromoCard = ({ promotion }: Props) => {
  const [products, setProducts] = useState<IProductVariantPromo[]>([])

  useEffect(() => {
    const getProducts = async () => {
      const datas = []
      for (const product of promotion.products) {
        const res = await getVariantById(product.product_id)
        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 res = await getVariantById(product.product_id)
        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
    })
    return total
  }, [products, freeProducts])

  const allProducts = [...products, ...freeProducts]

  return (
    <div className={style.card}>
      <ProductPromoCardCountdown promotion={promotion} />

      <div className='px-4 mt-4 text-caption-1'>
        <div className="flex justify-between items-center">
          <div className={style.title}>{promotion.name}</div>

          <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
            <div className={style.badgeType}>
              Paket {PROMO_CATEGORY[promotion.type.value].alias}
              <InfoIcon size={16} />
            </div>
          </Tooltip>
        </div>

        <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
          {allProducts.map((product, index) => (
            <>
              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
                <ProductPromoItem
                  variant={product}
                  isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
                />
              </motion.div>
              <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
                {index + 1 < allProducts.length && (
                  <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
                    <PlusIcon size={14} strokeWidth='2px' />
                  </div>
                )}
              </motion.div>
            </>
          ))}
        </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>
            <ProductPromoAddToCart promotion={promotion} />
          </div>

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

export default ProductPromoCard