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

import Link from "@/core/components/elements/Link/Link"
import useCart from "../hooks/useCart"
import Image from "@/core/components/elements/Image/Image"
import currencyFormat from "@/core/utils/currencyFormat"
import { useEffect, useState } from "react"
import { deleteItemCart, getItemCart, updateItemCart } from "@/core/utils/cart"
import { CheckIcon, RectangleGroupIcon, TrashIcon } from "@heroicons/react/24/outline"
import { createSlug } from "@/core/utils/slug"
import { useRouter } from "next/router"
import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
import { toast } from "react-hot-toast"
import Spinner from "@/core/components/elements/Spinner/Spinner"

const Cart = () => {
  const router = useRouter()
  const [ products, setProducts ] = useState(null)
  const { cart } = useCart({ enabled: !products })

  const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0)
  const [ totalTaxAmount, setTotalTaxAmount ] = useState(0)
  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0)

  const [ deleteConfirmation, setDeleteConfirmation ] = useState(null)

  useEffect(() => {
    if (cart.data && !products) {
      const productsWithQuantity = cart.data.map((product) => {
        const productInCart = getItemCart({ productId: product.id })
        if (!productInCart) return
        return {
          ...product,
          quantity: productInCart.quantity,
          selected: productInCart.selected
        }
      })
      setProducts(productsWithQuantity)
    }
  }, [cart, products])

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

    let calculateTotalPriceBeforeTax = 0
    let calculateTotalTaxAmount = 0
    let calculateTotalDiscountAmount = 0
    for (const product of products) {
      if (product.quantity == '') continue
      updateItemCart({
        productId: product.id,
        quantity: product.quantity,
        selected: product.selected
      })
      
      if (!product.selected) 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
    }
    setTotalPriceBeforeTax(calculateTotalPriceBeforeTax)
    setTotalTaxAmount(calculateTotalTaxAmount)
    setTotalDiscountAmount(calculateTotalDiscountAmount)
  }, [products])

  const updateQuantity = (value, productId, operation = '') => {
    let productIndex = products.findIndex((product) => product.id == productId)
    if (productIndex < 0) return

    let productsToUpdate = products
    let quantity = productsToUpdate[productIndex].quantity
    if (value != '' && isNaN(parseInt(value))) return
    value = value != '' ? parseInt(value) : ''
    switch (operation) {
      case 'PLUS':
        quantity += value
        break
      case 'MINUS':
        if ((quantity - value) < 1) return
        quantity -= value
        break
      case 'BLUR':
        if (value != '') return
        quantity = 1
        break
      default:
        quantity = value
        break
    }
    productsToUpdate[productIndex].quantity = quantity
    setProducts([ ...productsToUpdate ])
  }

  const toggleSelected = (productId) => {
    let productIndex = products.findIndex((product) => product.id == productId)
    if (productIndex < 0) return

    let productsToUpdate = products
    productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
    setProducts([ ...productsToUpdate ])
  }

  const selectedProduct = () => {
    if (!products) return []
    return products.filter((product) => product.selected == true)
  }

  const deleteProduct = (productId) => {
    const productsToUpdate = products.filter((product) => product.id != productId)
    deleteItemCart({ productId })
    setDeleteConfirmation(null)
    setProducts([...productsToUpdate])
    toast.success('Berhasil menghapus barang dari keranjang')
  }
  
  return (
    <div className="pt-6">
      <div className="flex justify-between mb-4 px-4">
        <h1 className="font-semibold">Daftar Produk Belanja</h1>
        <Link href="/">Cari Produk Lain</Link>
      </div>

      <div className="flex flex-col gap-y-4 px-4">
        { cart.isLoading && (
          <div className="flex justify-center my-4">
            <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
          </div>
        ) }
        { products?.map((product) => (
          <div key={product?.id} className="flex">
            <button
              type="button" 
              className="flex items-center mr-2"
              onClick={() => toggleSelected(product.id)}
            >
              { !product?.selected && (
                <div className="w-5 h-5 border border-gray_r-11 rounded" />
              ) }
              { product?.selected && (
                <CheckIcon className="border bg-red_r-10 w-5 text-white" /> 
              ) }
            </button>
            <Link 
              href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
              className="w-3/12 flex-shrink-0"
            >
              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" />
            </Link>
            <div className="flex-1 px-2 text-caption-1">
              <Link 
                href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
                className="line-clamp-2 leading-6 !text-gray_r-12 font-normal"
              >
                { product?.parent?.name }
              </Link>
              <div className="text-gray_r-11 mt-1">
                { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
              </div>
              { product?.price?.discountPercentage > 0 && (
                <div className="flex gap-x-1 items-center mt-3">
                  <div className="text-gray_r-11 line-through text-caption-2">
                    {currencyFormat(product?.price?.price)}
                  </div>
                  <div className="badge-solid-red">
                    {product?.price?.discountPercentage}%
                  </div>
                </div>
              ) }
              <div className="font-normal mt-1">
                { currencyFormat(product?.price?.priceDiscount) }
              </div>
              <div className="flex justify-between items-center mt-1">
                <div className="text-red_r-11 font-medium">
                  { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
                </div>
                <div className="flex gap-x-1">
                  <button 
                    type="button" 
                    className="btn-light px-2 py-1"
                    onClick={() => updateQuantity(1, product?.id, 'MINUS')}
                    disabled={product?.quantity == 1}
                  >
                    -
                  </button>
                  <input 
                    className="form-input w-10 border-0 border-b rounded-none py-1 px-0 text-center" 
                    type="number"
                    value={product?.quantity} 
                    onChange={(e) => updateQuantity(e.target.value, product?.id)}
                    onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
                  />
                  <button 
                    type="button" 
                    className="btn-light px-2 py-1"
                    onClick={() => updateQuantity(1, product?.id, 'PLUS')}
                  >
                    +
                  </button>
                  <button 
                    className="btn-red p-1 ml-1" 
                    onClick={() => setDeleteConfirmation(product)}
                  >
                    <TrashIcon className="w-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )) }
      </div>

      <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white">
        <div className="flex justify-between mb-4">
          <div className="text-gray_r-11">
            Total: 
            <span className="text-red_r-11 font-semibold">
              { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : ' - ' }
            </span>
          </div>
        </div>
        <div className="flex gap-x-3">
          <button 
            type="button" 
            className="btn-yellow flex-1"
            disabled={selectedProduct().length == 0}
            onClick={() => router.push('/shop/quotation')}
          >
            Quotation
          </button>
          <button 
            type="button" 
            className="btn-solid-red flex-1"
            disabled={selectedProduct().length == 0}
            onClick={() => router.push('/shop/checkout')}
          >
            Checkout
          </button>
        </div>
      </div>

      <BottomPopup
        active={deleteConfirmation}
        close={() => setDeleteConfirmation(null)}
        title="Hapus dari Keranjang"
      >
        <div className="leading-7 text-gray_r-12/80">
          Apakah anda yakin menghapus barang <span className="underline">{deleteConfirmation?.name}</span> dari keranjang?
        </div>
        <div className="flex mt-6 gap-x-4">
          <button 
            className="btn-solid-red flex-1" 
            type="button"
            onClick={() => deleteProduct(deleteConfirmation?.id)}
          >
            Ya, Hapus
          </button>
          <button 
            className="btn-light flex-1" 
            type="button"
            onClick={() => setDeleteConfirmation(null)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
    </div>
  )
}

export default Cart