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

import Badge from '@/core/components/elements/Badge/Badge'
import Divider from '@/core/components/elements/Divider/Divider'
import Image from '@/core/components/elements/Image/Image'
import Link from '@/core/components/elements/Link/Link'
import currencyFormat from '@/core/utils/currencyFormat'
import { useEffect, useState } from 'react'
import Select from 'react-select'
import ProductSimilar from './ProductSimilar'
import LazyLoad from 'react-lazy-load'
import { toast } from 'react-hot-toast'
import { updateItemCart } from '@/core/utils/cart'
import useWishlist from '@/lib/wishlist/hooks/useWishlist'
import { HeartIcon } from '@heroicons/react/24/outline'
import useAuth from '@/core/hooks/useAuth'
import { useRouter } from 'next/router'
import createOrDeleteWishlistApi from '@/lib/wishlist/api/createOrDeleteWishlistApi'

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

const Product = ({ product }) => {
  const auth = useAuth()
  const router = useRouter()
  const { wishlist } = useWishlist({ productId: product?.id })
  const [quantity, setQuantity] = useState('1')
  const [selectedVariant, setSelectedVariant] = useState(null)
  const [informationTab, setInformationTab] = useState(null)

  const [activeVariant, setActiveVariant] = useState({
    id: product.id,
    code: product.code,
    name: product.name,
    price: product.lowestPrice,
    stock: product.stockTotal,
    weight: product.weight
  })

  const variantOptions = product.variants?.map((variant) => ({
    value: variant.id,
    label:
      (variant.code ? `[${variant.code}] ` : '') +
      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name)
  }))

  useEffect(() => {
    if (!selectedVariant && variantOptions.length == 1) {
      setSelectedVariant(variantOptions[0])
    }
  }, [selectedVariant, variantOptions])

  useEffect(() => {
    if (selectedVariant) {
      const variant = product.variants.find((variant) => variant.id == selectedVariant.value)
      const variantAttributes =
        variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''

      setActiveVariant({
        id: variant.id,
        code: variant.code,
        name: variant.parent.name + variantAttributes,
        price: variant.price,
        stock: variant.stock,
        weight: variant.weight
      })
    }
  }, [selectedVariant, product])

  useEffect(() => {
    if (!informationTab) {
      setInformationTab(informationTabOptions[0].value)
    }
  }, [informationTab])

  const validAction = () => {
    let isValid = true
    if (!selectedVariant) {
      toast.error('Pilih varian terlebih dahulu')
      isValid = false
    }
    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
      toast.error('Jumlah barang minimal 1')
      isValid = false
    }
    return isValid
  }

  const handleClickCart = () => {
    if (!validAction()) return
    updateItemCart({
      productId: activeVariant.id,
      quantity
    })
    toast.success('Berhasil menambahkan ke keranjang')
  }

  const handleClickBuy = () => {
    if (!validAction()) return
    router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`)
  }

  const toggleWishlist = async () => {
    if (!auth) {
      router.push('/login')
      return
    }
    const data = { product_id: product.id }
    await createOrDeleteWishlistApi({ data })
    if (wishlist.data.productTotal > 0) {
      toast.success('Berhasil menghapus dari wishlist')
    } else {
      toast.success('Berhasil menambahkan ke wishlist')
    }
    wishlist.refetch()
  }

  return (
    <>
      <Image
        src={product.image}
        alt={product.name}
        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
      />

      <div className='p-4'>
        <div className='flex items-end mb-2'>
          {product.manufacture?.name ? (
            <Link href='/'>{product.manufacture?.name}</Link>
          ) : (
            <div>-</div>
          )}
          <button
            type='button'
            className='ml-auto'
            onClick={toggleWishlist}
          >
            {wishlist.data?.productTotal > 0 ? (
              <HeartIcon className='w-6 fill-red_r-11 text-red_r-11' />
            ) : (
              <HeartIcon className='w-6' />
            )}
          </button>
        </div>
        <h1 className='leading-6 font-medium'>{activeVariant?.name}</h1>
        {activeVariant?.price?.discountPercentage > 0 && (
          <div className='flex gap-x-1 items-center mt-2'>
            <div className='text-gray_r-11 line-through text-caption-1'>
              {currencyFormat(activeVariant?.price?.price)}
            </div>
            <Badge type='solid-red'>{activeVariant?.price?.discountPercentage}%</Badge>
          </div>
        )}
        <h3 className='text-red_r-11 font-semibold mt-1'>
          {activeVariant?.price?.priceDiscount > 0 ? (
            currencyFormat(activeVariant?.price?.priceDiscount)
          ) : (
            <span className='text-gray_r-11 leading-6 font-normal'>
              Hubungi kami untuk dapatkan harga terbaik,&nbsp;
              <a
                href='https://wa.me/'
                className='text-red_r-11 underline'
              >
                klik disini
              </a>
            </span>
          )}
        </h3>
      </div>

      <Divider />

      <div className='p-4'>
        <div>
          <label className='flex justify-between'>
            Pilih Varian:
            <span className='text-gray_r-11'>{product?.variantTotal} Varian</span>
          </label>
          <Select
            name='variant'
            classNamePrefix='form-select'
            options={variantOptions}
            className='mt-2'
            value={selectedVariant}
            onChange={(option) => setSelectedVariant(option)}
            isSearchable={product.variantTotal > 10}
          />
        </div>
        <div className='mt-4 mb-2'>Jumlah</div>
        <div className='flex gap-x-3'>
          <div className='w-2/12'>
            <input
              name='quantity'
              type='number'
              className='form-input'
              value={quantity}
              onChange={(e) => setQuantity(e.target.value)}
            />
          </div>
          <button
            type='button'
            className='btn-yellow flex-1'
            onClick={handleClickCart}
          >
            Keranjang
          </button>
          <button
            type='button'
            className='btn-solid-red flex-1'
            onClick={handleClickBuy}
          >
            Beli
          </button>
        </div>
      </div>

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold'>Informasi Produk</h2>
        <div className='flex gap-x-4 mt-4 mb-3'>
          {informationTabOptions.map((option) => (
            <TabButton
              value={option.value}
              key={option.value}
              active={informationTab == option.value}
              onClick={() => setInformationTab(option.value)}
            >
              {option.label}
            </TabButton>
          ))}
        </div>

        <TabContent
          active={informationTab == 'specification'}
          className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
        >
          <SpecificationContent label='Jumlah Varian'>
            <span>{product?.variantTotal} Varian</span>
          </SpecificationContent>
          <SpecificationContent label='Nomor SKU'>
            <span>SKU-{product?.id}</span>
          </SpecificationContent>
          <SpecificationContent label='Part Number'>
            <span>{activeVariant?.code || '-'}</span>
          </SpecificationContent>
          <SpecificationContent label='Stok'>
            {activeVariant?.stock > 0 && (
              <span className='flex gap-x-1.5'>
                <div className='badge-solid-red'>Ready Stock</div>
                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
              </span>
            )}
            {activeVariant?.stock == 0 && (
              <a
                href='https://wa.me'
                className='text-red_r-11 font-medium'
              >
                Tanya Stok
              </a>
            )}
          </SpecificationContent>
          <SpecificationContent label='Berat Barang'>
            {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
            {activeVariant?.weight == 0 && (
              <a
                href='https://wa.me'
                className='text-red_r-11 font-medium'
              >
                Tanya Berat
              </a>
            )}
          </SpecificationContent>
        </TabContent>

        <TabContent
          active={informationTab == 'description'}
          className='leading-6 text-gray_r-11'
          dangerouslySetInnerHTML={{
            __html: product.description != '' ? product.description : 'Belum ada deskripsi produk.'
          }}
        />
      </div>

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
        <LazyLoad>
          <ProductSimilar query={product?.name.split(' ').slice(1, 3).join(' ')} />
        </LazyLoad>
      </div>
    </>
  )
}

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

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

const SpecificationContent = ({ children, label }) => (
  <div className='flex justify-between p-3'>
    <span className='text-gray_r-11'>{label}</span>
    {children}
  </div>
)

export default Product