import { useCallback, useEffect, useMemo, useState } from 'react';
import { getCartApi } from '../api/CartApi';
import currencyFormat from '@/core/utils/currencyFormat';
import { createSlug } from '@/core/utils/slug';
import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';
import odooApi from '@/core/api/odooApi';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import Image from '@/core/components/elements/Image/Image';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { AnimatePresence, motion } from 'framer-motion';
import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css';
const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline');
const { default: Link } = require('next/link');

const Cardheader = (cartCount) => {
  const PPN = process.env.NEXT_PUBLIC_PPN
  const router = useRouter();
  const [subTotal, setSubTotal] = useState(null);
  const [buttonLoading, SetButtonTerapkan] = useState(false);
  const itemLoading = [1, 2, 3];
  const auth = useAuth();
  const [countCart, setCountCart] = useState(null);
  const {
    productCart,
    setRefreshCart,
    setProductCart,
    refreshCart,
    isLoading,
    setIsloading,
  } = useProductCartContext();

  const [isHovered, setIsHovered] = useState(false);
  const [isTop, setIsTop] = useState(true);
  const products = useMemo(() => {
    return productCart?.products || [];
  }, [productCart]);

  const handleMouseEnter = () => {
    setIsHovered(true);
    getCart();
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  const getCart = () => {
    if (!productCart && auth) {
      refreshCartf();
    }
  };
  const refreshCartf = useCallback(async () => {
    setIsloading(true);
    let cart = await getCartApi();
    setProductCart(cart);
    setCountCart(cart?.products?.length);
    setIsloading(false);
  }, [setProductCart, setIsloading]);

  useEffect(() => {
    if (!products) return;

    let calculateTotalPriceBeforeTax = 0;
    let calculateTotalTaxAmount = 0;
    let calculateTotalDiscountAmount = 0;
    for (const product of products) {
      if (product.quantity == '') continue;

      let priceBeforeTax = product.price.price / PPN;
      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
      calculateTotalTaxAmount +=
        (product.price.price - priceBeforeTax) * product.quantity;
      calculateTotalDiscountAmount +=
        (product.price.price - product.price.priceDiscount) * product.quantity;
    }
    let subTotal =
      calculateTotalPriceBeforeTax -
      calculateTotalDiscountAmount +
      calculateTotalTaxAmount;
    setSubTotal(subTotal);
  }, [products]);

  useEffect(() => {
    if (refreshCart) {
      refreshCartf();
    }
    setRefreshCart(false);
  }, [refreshCart, refreshCartf, setRefreshCart]);

  useEffect(() => {
    setCountCart(cartCount.cartCount);
    setRefreshCart(false);
  }, [cartCount]);

  useEffect(() => {
    const handleScroll = () => {
      setIsTop(window.scrollY === 0);
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleCheckout = async () => {
    SetButtonTerapkan(true);
    let checkoutAll = await odooApi(
      'POST',
      `/api/v1/user/${auth.id}/cart/select-all`
    );
    router.push('/shop/checkout');
  };

  return (
    <div className='relative group'>
      <div>
        <Link
          href='/shop/cart'
          target='_blank'
          rel='noreferrer'
          className='flex items-center gap-x-2 !text-gray_r-12/80'
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div className={`relative ${countCart > 0 && 'mr-2'}`}>
            <ShoppingCartIcon className='w-7' />
            {countCart > 0 && (
              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
                {countCart}
              </span>
            )}
          </div>
          <span>
            Keranjang
            <br />
            Belanja
          </span>
        </Link>
      </div>
      <AnimatePresence>
        {isHovered && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15, top: { duration: 0.3 } }}
              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
            />
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, transition: { duration: 0.2 } }}
              exit={{ opacity: 0, transition: { duration: 0.3 } }}
              className='absolute z-10 left-0 w-96'
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: 'auto' }}
                exit={{ height: 0 }}
                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
              >
                <div className='p-2 flex justify-between items-center'>
                  <h5 className='text-base font-semibold leading-none'>
                    Keranjang Belanja
                  </h5>
                  <Link
                    href='/shop/cart'
                    class='text-sm font-medium text-red-600 underline'
                  >
                    Lihat Semua
                  </Link>
                </div>
                <hr className='mt-3 mb-3 border border-gray-100' />
                <div className='flow-root max-h-[250px] overflow-y-auto'>
                  {!auth && (
                    <div className='justify-center p-4'>
                      <p className='text-gray-500 text-center '>
                        Silahkan{' '}
                        <Link
                          href='/login'
                          className='text-red-600 underline leading-6'
                        >
                          Login
                        </Link>{' '}
                        Untuk Melihat Daftar Keranjang Belanja Anda
                      </p>
                    </div>
                  )}
                  {isLoading &&
                    itemLoading.map((item) => (
                      <div
                        key={item}
                        role='status'
                        className='max-w-sm animate-pulse'
                      >
                        <div className='flex items-center space-x-4 mb- 2'>
                          <div className='flex-shrink-0'>
                            <PhotoIcon className='h-16 w-16 text-gray-500' />
                          </div>
                          <div className='flex-1 min-w-0'>
                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                          </div>
                        </div>
                      </div>
                    ))}
                  {auth && products.length === 0 && !isLoading && (
                    <div className='justify-center p-4'>
                      <p className='text-gray-500 text-center '>
                        Tidak Ada Produk di Keranjang Belanja Anda
                      </p>
                    </div>
                  )}
                  {auth && products.length > 0 && !isLoading && (
                    <>
                      <ul
                        role='list'
                        className='divide-y divide-gray-200 dark:divide-gray-700'
                      >
                        {products &&
                          products?.map((product, index) => (
                            <>
                              <li className='py-1 sm:py-2'>
                                <div className='flex items-center space-x-4'>
                                  <div className='bagian gambar flex-shrink-0'>
                                    {product.cartType === 'promotion' && (
                                      <Image
                                        src={product.imageProgram[0]}
                                        alt={product.name}
                                        className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
                                      />
                                    )}
                                    {product.cartType === 'product' && (
                                      <Link
                                        href={createSlug(
                                          '/shop/product/',
                                          product?.parent.name,
                                          product?.parent.id
                                        )}
                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                                      >
                                        <Image
                                          src={product?.parent?.image}
                                          alt={product?.name}
                                          className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
                                        />
                                      </Link>
                                    )}
                                  </div>
                                  <div className='bagian tulisan dan harga flex-1 min-w-0'>
                                    {product.cartType === 'promotion' && (
                                      <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
                                        {product.name}
                                      </p>
                                    )}
                                    {product.cartType === 'product' && (
                                      <Link
                                        href={createSlug(
                                          '/shop/product/',
                                          product?.parent.name,
                                          product?.parent.id
                                        )}
                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                                      >
                                        {' '}
                                        <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
                                          {product.parent.name}
                                        </p>
                                      </Link>
                                    )}
                                    {product?.hasFlashsale && (
                                      <div className='flex gap-x-1 items-center mb-2 mt-1'>
                                        <div className='badge-solid-red'>
                                          {product?.price?.discountPercentage}%
                                        </div>
                                        <div className='text-gray_r-11 line-through text-caption-2'>
                                          {currencyFormat(
                                            product?.price?.price
                                          )}
                                        </div>
                                      </div>
                                    )}

                                    <div className='flex justify-between items-center'>
                                      <div className='font-semibold text-sm text-red-600'>
                                        {product?.price?.priceDiscount > 0 ? (
                                          currencyFormat(
                                            product?.price?.priceDiscount
                                          )
                                        ) : (
                                          <span className='text-gray_r-12/90 font-normal text-caption-1'>
                                            <a
                                              href={whatsappUrl('product', {
                                                name: product.name,
                                                manufacture:
                                                  product.manufacture?.name,
                                                url: createSlug(
                                                  '/shop/product/',
                                                  product.name,
                                                  product.id,
                                                  true
                                                ),
                                              })}
                                              className='text-danger-500 underline'
                                              rel='noopener noreferrer'
                                              target='_blank'
                                            >
                                              Call For Price
                                            </a>
                                          </span>
                                        )}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div className='flex flex-col w-3/4'>
                                  {product.products?.map((product) => (
                                    <div
                                      key={product.id}
                                      className='md:ml-8 ml-4 mt-2 flex'
                                    >
                                      <Link
                                        href={createSlug(
                                          '/shop/product/',
                                          product.parent.name,
                                          product.parent.id.toString()
                                        )}
                                        className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
                                      >
                                        {product?.image && (
                                          <Image
                                            src={product.image}
                                            alt={product.name}
                                            width={40}
                                            height={40}
                                            className='w-full h-full object-fill'
                                          />
                                        )}
                                      </Link>

                                      <div className='ml-4 w-full flex flex-col gap-y-1'>
                                        <Link
                                          href={createSlug(
                                            '/shop/product/',
                                            product.parent.name,
                                            product.parent.id.toString()
                                          )}
                                          className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
                                        >
                                          {product.displayName}
                                        </Link>

                                        <div className='flex w-full'>
                                          <div className='flex flex-col'>
                                            {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
                                            <div>
                                              <span className='text-gray-500 text-caption-1'>
                                                Berat Barang:{' '}
                                              </span>
                                              <span className='text-gray-500 text-caption-1'>
                                                {product.packageWeight} Kg
                                              </span>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                  {product.freeProducts?.map((product) => (
                                    <div
                                      key={product.id}
                                      className='md:ml-8 ml-4 mt-2 flex'
                                    >
                                      <Link
                                        href={createSlug(
                                          '/shop/product/',
                                          product.parent.name,
                                          product.parent.id.toString()
                                        )}
                                        className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
                                      >
                                        {product?.image && (
                                          <Image
                                            src={product.image}
                                            alt={product.name}
                                            width={40}
                                            height={40}
                                            className='w-full h-full object-fill'
                                          />
                                        )}
                                      </Link>

                                      <div className='ml-4 w-full flex flex-col gap-y-1'>
                                        <Link
                                          href={createSlug(
                                            '/shop/product/',
                                            product.parent.name,
                                            product.parent.id.toString()
                                          )}
                                          className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
                                        >
                                          {product.displayName}
                                        </Link>

                                        <div className='flex w-full'>
                                          <div className='flex flex-col'>
                                            {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
                                            <div>
                                              <span className='text-gray-500 text-caption-1'>
                                                Berat Barang:{' '}
                                              </span>
                                              <span className='text-gray-500 text-caption-1'>
                                                {product.packageWeight} Kg
                                              </span>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              </li>
                            </>
                          ))}
                      </ul>
                      <hr />
                    </>
                  )}
                </div>
                {auth && products.length > 0 && !isLoading && (
                  <>
                    <div className='mt-3'>
                      <span className='text-gray-400 text-caption-2'>
                        Subtotal Sebelum PPN :{' '}
                      </span>
                      <span className='font-semibold text-red-600'>
                        {currencyFormat(subTotal)}
                      </span>
                    </div>
                    <div className='mt-5 mb-2'>
                      <button
                        type='button'
                        className='btn-solid-red rounded-lg w-full'
                        onClick={handleCheckout}
                        disabled={buttonLoading}
                      >
                        {buttonLoading
                          ? 'Loading...'
                          : 'Lanjutkan Ke Pembayaran'}
                      </button>
                    </div>
                  </>
                )}
              </motion.div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Cardheader;