import { useCallback, useEffect, useMemo, useState } from 'react'
import { getCartApi } from '../api/CartApi'
import useAuth from '@/core/hooks/useAuth'
import { useRouter } from 'next/router'
import odooApi from '@/core/api/odooApi'
import { useProductCartContext } from '@/contexts/ProductCartContext'

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>
  )
}

export default Cardheader