path: root/src/lib/cart/components/Cartheader.jsx

import { useCallback, useEffect, useMemo, useState } from 'react'
import { getCartApi } from '../api/CartApi'
import currencyFormat from '@/core/utils/currencyFormat'
import Image from '@/core/components/elements/Image/Image'
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 whatsappUrl from '@/core/utils/whatsappUrl'

const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
const { default: Link } = require('next/link')

const Cardheader = (cartCount) => {
  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 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.productTotal)
    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 / 1.11
      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)
  }, [cartCount])

  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>
      <div
        className={` ${
          isHovered ? 'block' : 'hidden'
        } fixed top-[155px] left-0 w-full h-full bg-black opacity-50 z-10`}
      ></div>
      <div
        className='hidden group-hover:block absolute z-10 left-0 w-96'
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
          <div className='p-2 flex justify-between items-center'>
            <h5 class='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' class='max-w-sm animate-pulse'>
                  <div class='flex items-center space-x-4 mb- 2'>
                    <div class='flex-shrink-0'>
                      <PhotoIcon class='h-16 w-16 text-gray-500' />
                    </div>
                    <div class='flex-1 min-w-0'>
                      <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
                      <div class='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' class='divide-y divide-gray-200 dark:divide-gray-700'>
                  {products &&
                    products?.map((product, index) => (
                      <>
                        <li class='py-1 sm:py-2'>
                          <div class='flex items-center space-x-4'>
                            <div class='flex-shrink-0'>
                              <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 class='flex-1 min-w-0'>
                              <Link
                                href={createSlug(
                                  '/shop/product/',
                                  product?.parent.name,
                                  product?.parent.id
                                )}
                                className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                              >
                                {' '}
                                <p class='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>
                        </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>
            </>
          )}
        </div>
      </div>
    </div>
  )
}

export default Cardheader