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

import Image from '@/core/components/elements/Image/Image'
import ImageNext from 'next/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 PromotionType from '@/lib/promotinProgram/components/PromotionType'
import useAuth from '@/core/hooks/useAuth'

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 [promotionType, setPromotionType] = useState(false)
  const [promotionActiveId, setPromotionActiveId] = useState(null)
  const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)

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

  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 handleAddToCart = (variantId) => {
    if (!auth) {
      router.push(`/login?next=/shop/product/${slug}`)
      return
    }
    const quantity = variantQuantityRefs.current[variantId].value

    if (!validQuantity(quantity)) return
    if(product.variants.length > 1){
      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
      updateItemCart({
        productId: variantId,
        quantity,
        programLineId: product.variants[variantIndex].programActive,
        selected: true
      })
    }else{
      updateItemCart({
        productId: variantId,
        quantity,
        programLineId: promotionActiveId,
        selected: true
      })
    }
   
    setAddCartAlert(true)
  }

  const handleBuy = (variant) => {
    const quantity = variantQuantityRefs.current[variant].value
    if (!validQuantity(quantity)) return
    router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`)
  }

  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 dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
      setProductSimilarInBrand(dataProductSimilar.products)
    }
    if (!productSimilarInBrand) loadProductSimilarInBrand()
  }, [product, productSimilarInBrand])

  return (
    <DesktopView>
      <div className='container mx-auto pt-10'>
        <div className='flex'>
          <div className='w-full flex flex-wrap'>
            <div className='w-5/12'>
              <Image
                src={product.image}
                alt={product.name}
                className='h-[430px] object-contain object-center w-full border border-gray_r-4'
              />
            </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-1/4 text-gray_r-12/70'>Nomor SKU</div>
                  <div className='w-3/4'>SKU-{product.id}</div>
                </div>
                <div className='flex p-3 bg-gray_r-4'>
                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
                  <div className='w-3/4'>{product.code || '-'}</div>
                </div>
                <div className='flex p-3'>
                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
                  <div className='w-3/4'>
                    {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 bg-gray_r-4'>
                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
                  <div className='w-3/4'>
                    {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>
              </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,
                      url: createSlug('/shop/product/', product.name, product.id, true)
                    })}
                    className='text-danger-500 underline'
                  >
                    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={setVariantQuantityRef(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>Harga</th>
                    <th>Jumlah</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {product.variants.map((variant, index) => (
                    <tr key={variant.id}>
                      <td>{variant.code}</td>
                      <td>{variant.attributes.join(', ') || '-'}</td>
                      <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,
                                url: createSlug('/shop/product/', product.name, product.id, true)
                              })}
                              className='text-red_r-11'
                            >
                              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={setVariantQuantityRef(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)}
                          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