import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import { Button, Link, useToast } from '@chakra-ui/react'
import product from 'next-seo/lib/jsonld/product'
import { useRouter } from 'next/router'
import { useState } from 'react'
import Image from '~/components/ui/image'
import { getAuth } from '~/libs/auth'
import { upsertUserCart } from '~/services/cart'
import LazyLoad from 'react-lazy-load';
import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
import { IProductDetail } from '~/types/product';
import ImageNext from 'next/image';
import { useProductCartContext } from '@/contexts/ProductCartContext'

type Props = {
  variantId: number | null,
  quantity?: number;
  source?: 'buy' | 'add_to_cart';
  products : IProductDetail
}

const AddToCart = ({
  variantId,
  quantity = 1,
  source = 'add_to_cart',
  products
}: Props) => {
  const auth = getAuth()
  const router = useRouter()
  const toast = useToast({
    position: 'top',
    isClosable: true
  })

  const [product, setProducts] = useState(products);
  
  const {setRefreshCart} = useProductCartContext()

  const productSimilarQuery = [
    product?.name,
    `fq=-product_id_i:${product.id}`,
    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
  ].join('&');
  const [addCartAlert, setAddCartAlert] = useState(false);

  const handleClick = async () => {
    if (typeof auth !== 'object') {
      const currentUrl = encodeURIComponent(router.asPath)
      router.push(`/login?next=${currentUrl}`)
      return;
    }
    
    if (
      !variantId ||
      isNaN(quantity) ||
      typeof auth !== 'object'
    ) return;
    
    setRefreshCart(true);
    // console.log('Refresh cart triggered');
    setAddCartAlert(true);
    
    toast.promise(
      upsertUserCart({
        userId: auth.id,
        type: 'product',
        id: variantId,
        qty: quantity,
        selected: true,
        source: source,
        qtyAppend: true
      }),
      {
        loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' },
        success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' },
        error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' },
      }
    )
    
    
    
    if (source === 'buy') {
      router.push('/shop/checkout?source=buy')
    }
  }

  const btnConfig = {
    'add_to_cart': {
      colorScheme: 'yellow',
      text: 'Keranjang'
    },
    'buy': {
      colorScheme: 'red',
      text: 'Beli'
    }
  }

  return (
    <div className='w-full'>
      <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
        {btnConfig[source].text}
      </Button>
      <BottomPopup
          className='!container'
          title='Berhasil Ditambahkan'
          active={addCartAlert}
          close={() => {
            setAddCartAlert(false);
          }}
        >
          <div className='flex mt-4'>
            <div className='w-[10%]'>
              <ImageNext
                  src={product.image}
                  alt={product.name}
                  className='h-32 object-contain object-center w-full border border-gray_r-4'
                  width={80}
                  height={80}
                />
            </div>
            <div className='ml-3 flex flex-1 items-center font-normal'>
              {product.name}
            </div>
            <div className='ml-3 flex items-center font-normal'>
              <Link
                href='/shop/cart'
                className='flex-1 py-2 text-gray_r-12 btn-yellow'
              >
                Lihat Keranjang
              </Link>
            </div>
          </div>
          <div className='mt-8 mb-4'>
            <div className='text-h-sm font-semibold mb-6'>
              Kamu Mungkin Juga Suka
            </div>
            <LazyLoad>
              <ProductSimilar query={productSimilarQuery} />
            </LazyLoad>
          </div>
        </BottomPopup>
    </div>
  )
}

export default AddToCart	