path: root/src/lib/product/components/Product/ProductDesktop.jsx

import Image from '@/core/components/elements/Image/Image'
import Link from '@/core/components/elements/Link/Link'
import DesktopView from '@/core/components/views/DesktopView'
import currencyFormat from '@/core/utils/currencyFormat'
import { HeartIcon } from '@heroicons/react/24/outline'
import { useCallback, useEffect, useRef, useState } from 'react'
import LazyLoad from 'react-lazy-load'
import ProductSimilar from '../ProductSimilar'
import { toast } from 'react-hot-toast'
import { updateItemCart } from '@/core/utils/cart'
import { useRouter } from 'next/router'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import ProductCard from '../ProductCard'
import productSimilarApi from '../../api/productSimilarApi'
import whatsappUrl from '@/core/utils/whatsappUrl'
import odooApi from '@/core/api/odooApi'
import PromotionType from '@/lib/promotinProgram/components/PromotionType'
import useAuth from '@/core/hooks/useAuth'
import ImageNext from 'next/image'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import { LazyLoadComponent } from 'react-lazy-load-image-component'
import ColumnsSLA from './ColumnsSLA'
import { useProductCartContext } from '@/contexts/ProductCartContext'
import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
import { Info } from 'lucide-react'

const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
  const router = useRouter()
  const auth = useAuth()
  const { slug } = router.query

  const [quantityActive, setQuantity] = useState(null)
  const [lowestPrice, setLowestPrice] = useState(null)
  const [product, setProducts] = useState(products)

  const [addCartAlert, setAddCartAlert] = useState(false)
  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
  const [promotionType, setPromotionType] = useState(false)
  const [promotionActiveId, setPromotionActiveId] = useState(null)
  const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)

  const { setRefreshCart, refreshCart } = useProductCartContext()

  const getLowestPrice = useCallback(() => {
    const prices = product.variants.map((variant) => variant.price)
    const lowest = prices.reduce((lowest, price) => {
      return price.priceDiscount < lowest.priceDiscount ? price : lowest
    }, prices[0])
    return lowest
  }, [product])

  useEffect(() => {
    const lowest = getLowestPrice()
    setLowestPrice(lowest)
  }, [getLowestPrice])

  useEffect(() => {
    const getBackgound = async () => {
      const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
      setBackgorundFlashSale(get[0].image)
    }
    getBackgound()
  }, [])

  const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)

  const variantQuantityRefs = useRef([])

  const setVariantQuantityRef = (variantId) => (element) => {
    if (element) {
      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
      product.variants[variantIndex].quantity = element?.value
    }
    variantQuantityRefs.current[variantId] = element
  }

  const validQuantity = (quantity) => {
    let isValid = true
    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
      toast.error('Jumlah barang minimal 1')
      isValid = false
    }
    return isValid
  }

  const updateCart = (variantId, quantity, source) => {
    let dataUpdate
    if (product.variants.length > 1) {
      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
      dataUpdate = {
        productId: variantId,
        quantity,
        programLineId: product.variants[variantIndex].programActive,
        selected: true,
        source: source === 'buy' ? 'buy' : null
      }
    } else {
      dataUpdate = {
        productId: variantId,
        quantity,
        programLineId: promotionActiveId,
        selected: true,
        source: source === 'buy' ? 'buy' : null
      }
    }
    updateItemCart(dataUpdate)
  }

  const handleAddToCart = (variantId) => {
    if (!auth) {
      router.push(`/login?next=/shop/product/${slug}`)
      return
    }

    const quantity = variantQuantityRefs.current[variantId].value

    if (!validQuantity(quantity)) return

    let source = 'cart'
    updateCart(variantId, quantity, source)
    setRefreshCart(true)
    setAddCartAlert(true)
  }

  const handleQuantityChange = (variantId) => (event) => {
    const { value } = event.target
    const variantIndex = product.variants.findIndex((variant) => variant.id === variantId)
    if (variantIndex !== -1) {
      product.variants[variantIndex].quantity = parseInt(value, 10) // Pastikan untuk mengubah ke tipe number jika diperlukan
      // Lakukan sesuatu jika nilai quantity diubah
    }
  }

  const handleBuy = (variant) => {
    const quantity = variantQuantityRefs.current[variant].value
    if (!validQuantity(quantity)) return

    let source = 'buy'
    updateCart(variant, quantity, source)
    router.push(`/shop/checkout?source=buy`)
  }

  const variantSectionRef = useRef(null)
  const goToVariantSection = () => {
    if (variantSectionRef.current) {
      const position = variantSectionRef.current.getBoundingClientRect()
      window.scrollTo({
        top: position.top - 120 + window.pageYOffset,
        behavior: 'smooth'
      })
    }
  }

  const handlePromoClick = (variantId) => {
    setSelectVariantPromoActive(variantId)
    setPromotionType(true)
  }

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

  const [productSimilarInBrand, setProductSimilarInBrand] = useState(null)

  useEffect(() => {
    const loadProductSimilarInBrand = async () => {
      const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
      const source = 'right'
      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery, source })
      setProductSimilarInBrand(dataProductSimilar.products)
    }
    if (!productSimilarInBrand) loadProductSimilarInBrand()
  }, [product, productSimilarInBrand])

  useEffect(() => {
    const fetchData = async () => {
      const promises = product.variants.map(async (variant) => {
        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
        return {
          ...variant,
          sla: dataSLA
        }
      })
      const variantData = await Promise.all(promises)
      product.variants = variantData

      setIsLoadingSLA(false)
    }
    if (product.variantTotal == 1) fetchData()
  }, [product])

  return (
    <DesktopView>
      <div className='container mx-auto pt-10'>
        <div className='flex'>
          <div className='w-full flex flex-wrap'>
            <div className='w-5/12'>
              <div className='relative mb-2'>
                {product?.flashSale?.remainingTime > 0 && (
                  <div className={`absolute bottom-0 w-full`}>
                    <div className='absolute bottom-0 w-full h-full'>
                      <ImageNext
                        src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
                        width={1000}
                        height={100}
                      />
                    </div>
                    <div className='relative'>
                      <div className='flex gap-x-2 items-center p-2'>
                        <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
                          <span className='text-lg font-bold'>
                            {product.lowestPrice.discountPercentage}%
                          </span>
                        </div>
                        <div
                          className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
                        >
                          <ImageNext
                            src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                            width={17}
                            height={10}
                          />
                          <span className='text-white text-lg font-semibold'>
                            {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
                              ? product?.flashSale?.tag
                              : 'FLASH SALE'}
                          </span>
                        </div>
                        <div>
                          <CountDown2 initialTime={product.flashSale.remainingTime} />
                        </div>
                      </div>
                    </div>
                  </div>
                )}
                <Image
                  src={product.image}
                  alt={product.name}
                  className='h-[430px] object-contain object-center w-full border border-gray_r-4'
                />
              </div>
              <div>
                <p className='text-justify text-xs leading-5'>
                  <span className='font-semibold '>Keterangan : </span>Gambar atau foto berperan
                  sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan
                  berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang
                  lebih baik perihal gambar di 021-2933 8828.
                </p>
              </div>
            </div>

            <div className='w-7/12 px-4'>
              <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
              <div className='mt-10'>
                <div className='flex p-3'>
                  <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div>
                  <div className='w-8/12'>SKU-{product.id}</div>
                </div>
                <div className='flex p-3 bg-gray_r-4'>
                  <div className='w-4/12 text-gray_r-12/70'>Part Number</div>
                  <div className='w-8/12'>{product.code || '-'}</div>
                </div>
                <div className='flex p-3'>
                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
                  <div className='w-8/12'>
                    {product.manufacture?.name ? (
                      <Link
                        href={createSlug(
                          '/shop/brands/',
                          product.manufacture?.name,
                          product.manufacture?.id
                        )}
                      >
                        {product.manufacture?.name}
                      </Link>
                    ) : (
                      <div>-</div>
                    )}
                  </div>
                </div>
                <div className='flex p-3 items-center bg-gray_r-4'>
                  <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div>
                  <div className='w-8/12'>
                    {product.variants.length > 1 && (
                      <button
                        type='button'
                        onClick={goToVariantSection}
                        className={`flex gap-x-1 items-center p-2 rounded-lg w-auto btn-light`}
                      >
                        <span className='text-red-600 text-sm'>Lihat Selengkapnya</span>
                      </button>
                    )}

                    {product.variants.length === 1 && (
                      <>
                        {!product.variants[0]?.sla && <Skeleton width='20%' height='16px' />}
                        {product.variants[0]?.sla && (
                          <Tooltip
                            placement='top'
                            label={`Masa Persiapan Barang ${product.variants[0]?.sla?.slaDate}`}
                          >
                            <Box className='w-fit flex items-center gap-x-2'>
                              {product.variants[0]?.sla?.slaDate}
                              <Info size={16} />
                            </Box>
                          </Tooltip>
                        )}
                      </>
                    )}
                  </div>
                </div>

                {product.variants.length === 1 && (
                  <div className='flex p-3 '>
                    <div className='w-4/12 text-gray_r-12/70'>Stock</div>
                    <div className='w-8/12'>
                      {!product.variants[0]?.sla && <Skeleton width='10%' height='16px' />}
                      {product?.variants[0].sla?.qty > 0 && (
                        <span>{product?.variants[0].sla?.qty}</span>
                      )}
                      {product?.variants[0].sla?.qty == 0 && (
                        <a
                          href={whatsappUrl('product', {
                            name: product.name,
                            manufacture: product?.manufacture?.name,
                            url: createSlug('/shop/product/', product.name, product.id, true)
                          })}
                          className='text-danger-500 font-medium'
                        >
                          Tanya Admin
                        </a>
                      )}
                    </div>
                  </div>
                )}

                <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}>
                  <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
                  <div className='w-8/12'>
                    {product?.weight > 0 && <span>{product?.weight} KG</span>}
                    {product?.weight == 0 && (
                      <a
                        href={whatsappUrl('productWeight', {
                          name: product.name,
                          url: createSlug('/shop/product/', product.name, product.id, true)
                        })}
                        className='text-danger-500 font-medium'
                      >
                        Tanya Berat
                      </a>
                    )}
                  </div>
                </div>
                {product.variants.length <= 1 && (
                  <div className='pt-3'>
                    <div className='flex mt-1'>
                      <PromotionType
                        variantId={product.variants[0].id}
                        setPromotionActiveId={setPromotionActiveId}
                        promotionActiveId={promotionActiveId}
                        quantity={quantityActive}
                        product={product}
                      ></PromotionType>
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div className='w-full'>
              <div className='mt-12'>
                <div className='text-h-lg font-semibold'>Informasi Produk</div>
                <div className='flex gap-x-4 mt-6 mb-4'>
                  {informationTabOptions.map((option) => (
                    <TabButton
                      value={option.value}
                      key={option.value}
                      active={informationTab == option.value}
                      onClick={() => setInformationTab(option.value)}
                    >
                      {option.label}
                    </TabButton>
                  ))}
                </div>
                <div className='flex'>
                  <div className='w-3/4 leading-7 product__description'>
                    <TabContent active={informationTab == 'description'}>
                      <span
                        dangerouslySetInnerHTML={{
                          __html:
                            product.description != ''
                              ? product.description
                              : 'Belum ada deskripsi produk.'
                        }}
                      />
                    </TabContent>

                    <TabContent active={informationTab == 'information'}>
                      Belum ada informasi.
                    </TabContent>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className='w-[25%]'>
            {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
              <div className='text-gray_r-12/80'>Harga mulai dari: </div>
            )}

            {lowestPrice?.discountPercentage > 0 && (
              <div className='flex gap-x-1 items-center mt-2'>
                <div className='badge-solid-red text-caption-1'>
                  {lowestPrice?.discountPercentage}%
                </div>
                <div className='text-gray_r-11 line-through text-caption-1'>
                  {currencyFormat(lowestPrice?.price)}
                </div>
                {product.flashSale.remainingTime > 0 && (
                  <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
                    <ImageNext
                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                      width={15}
                      height={10}
                    />
                    <span className='text-white text-xs font-semibold'>
                      {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
                        ? product?.flashSale?.tag
                        : 'FLASH SALE'}
                    </span>
                  </div>
                )}
              </div>
            )}
            <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
              {lowestPrice?.priceDiscount > 0 ? (
                currencyFormat(lowestPrice?.priceDiscount)
              ) : (
                <span className='text-gray_r-12/90 font-normal text-h-sm'>
                  Hubungi kami untuk dapatkan harga terbaik,&nbsp;
                  <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'
                  >
                    klik disini
                  </a>
                </span>
              )}
            </h3>
            {product.variants.length > 1 ? (
              <button
                type='button'
                onClick={goToVariantSection}
                className='btn-solid-red w-full mt-6'
              >
                Lihat Varian
              </button>
            ) : (
              <div className='flex gap-x-3 mt-4'>
                <input
                  type='number'
                  className='form-input w-16 py-2 text-center bg-gray_r-1'
                  ref={setVariantQuantityRef(product.variants[0].id)}
                  onChange={handleQuantityChange(product.variants[0].id)}
                  defaultValue={1}
                />
                <button
                  type='button'
                  onClick={() => handleAddToCart(product.variants[0].id)}
                  className='flex-1 py-2 btn-yellow'
                >
                  Keranjang
                </button>
                <button
                  type='button'
                  onClick={() => handleBuy(product.variants[0].id)}
                  className='flex-1 py-2 btn-solid-red'
                >
                  Beli
                </button>
              </div>
            )}

            <div className='flex mt-4'>
              <button className='flex items-center gap-x-1' onClick={toggleWishlist}>
                {wishlist.data?.productTotal > 0 ? (
                  <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
                ) : (
                  <HeartIcon className='w-6' />
                )}
                Wishlist
              </button>
            </div>

            <div className='border border-gray_r-6 overflow-auto mt-4'>
              <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                Produk Serupa
              </div>
              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
                {productSimilarInBrand &&
                  productSimilarInBrand?.map((product) => (
                    <div className='py-2' key={product.id}>
                      <ProductCard product={product} variant='horizontal' />
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>

        {product.variants.length > 1 && (
          <div className='mt-12' ref={variantSectionRef}>
            <div className='text-h-lg font-semibold mb-6'>Varian Produk</div>
            <div className='table-specification'>
              <table>
                <thead>
                  <tr>
                    <th>Part Number</th>
                    <th>Varian</th>
                    <th>Stock</th>
                    <th>Persiapan Barang</th>
                    <th>Harga</th>
                    <th>Jumlah</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {product.variants.map((variant, index) => (
                    <tr key={variant.id}>
                      <td className='flex items-center justify-center gap-x-1'>
                        {variant.isFlashsale && (
                          <span className='blink-color-flash-sale'>&#128498;</span>
                        )}
                        {variant.code}
                      </td>
                      <td>{variant.attributes.join(', ') || '-'}</td>
                      <LazyLoadComponent>
                        <ColumnsSLA variant={variant} product={product} />
                      </LazyLoadComponent>
                      <td>
                        {variant.price.discountPercentage > 0 &&
                          variant.price.priceDiscount > 0 && (
                            <>
                              <div className='line-through text-caption-1 text-gray_r-11 mb-1'>
                                {currencyFormat(variant.price.price)}
                              </div>{' '}
                            </>
                          )}
                        <div>
                          {variant.price.priceDiscount > 0 ? (
                            currencyFormat(variant.price.priceDiscount)
                          ) : (
                            <a
                              href={whatsappUrl('product', {
                                name: variant.name,
                                manufacture: product.manufacture?.name,
                                url: createSlug('/shop/product/', product.name, product.id, true)
                              })}
                              className='text-red_r-11'
                              rel='noopener noreferrer'
                              target='_blank'
                            >
                              Call for price
                            </a>
                          )}
                        </div>
                        {/* <VariantPrice id={variant.id} /> */}
                      </td>
                      <td>
                        <input
                          type='number'
                          className='form-input w-16 py-2 text-center bg-gray_r-1'
                          ref={setVariantQuantityRef(variant.id)}
                          onChange={handleQuantityChange(variant.id)}
                          defaultValue={1}
                        />
                      </td>
                      <td className='flex gap-x-3'>
                        {/* {variant.programActive ? (
                          <ImageNext
                            src='/images/noun-applied-check2.svg'
                            alt=''
                            height={60}
                            width={60}
                            onClick={() => handlePromoClick(variant.id)}
                            className='cursor-pointer'
                          ></ImageNext>
                        ) : (
                          variant.hasProgram ? ( <div className='w-[60px] flex justify-center'>
                          <ImageNext
                            src='/images/noun-discount-5796402.svg'
                            alt=''
                            height={30}
                            width={30}
                            onClick={() => handlePromoClick(variant.id)}
                            className='cursor-pointer'
                          ></ImageNext>
                        </div>):( <div className='w-[60px] flex justify-center'>
                            <ImageNext
                              src='/images/noun-discount-57964023.svg'
                              alt=''
                              height={30}
                              width={30}
                              className='cursor-pointer'
                            ></ImageNext>
                          </div>)
                         
                        )} */}
                        <button
                          type='button'
                          onClick={() => handleAddToCart(variant.id)}
                          className='flex-1 py-2 btn-yellow'
                        >
                          Keranjang
                        </button>
                        <button
                          type='button'
                          onClick={() => handleBuy(variant.id)}
                          className='flex-1 py-2 btn-solid-red'
                        >
                          Beli
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div className='my-12'>
          <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
          <LazyLoad>
            <ProductSimilar query={productSimilarQuery} />
          </LazyLoad>
        </div>
        <BottomPopup
          className=' !h-[75%]'
          title='Pakai Promo'
          active={promotionType}
          close={() => setPromotionType(false)}
        >
          <div className='flex mt-4'>
            <PromotionType
              isModal={true}
              variantId={selectVariantPromoActive}
              setPromotionActiveId={setPromotionActiveId}
              promotionActiveId={promotionActiveId}
              quantity={quantityActive}
              product={product}
              setProducts={setProducts}
            ></PromotionType>
          </div>
        </BottomPopup>
        <BottomPopup
          className='!container'
          title='Berhasil Ditambahkan'
          active={addCartAlert}
          close={() => setAddCartAlert(false)}
        >
          <div className='flex mt-4'>
            <div className='w-[10%]'>
              <Image
                src={product.image}
                alt={product.name}
                className='h-32 object-contain object-center w-full border border-gray_r-4'
              />
            </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>
    </DesktopView>
  )
}

const informationTabOptions = [
  { value: 'description', label: 'Deskripsi' },
  { value: 'information', label: 'Info Penting' }
]

const TabButton = ({ children, active, ...props }) => {
  const activeClassName = active
    ? 'text-danger-500 underline underline-offset-4'
    : 'text-gray_r-12/80'
  return (
    <button {...props} type='button' className={`font-medium ${activeClassName}`}>
      {children}
    </button>
  )
}

const TabContent = ({ children, active, className = '', ...props }) => (
  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
    {children}
  </div>
)

export default ProductDesktop