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

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 { updateItemCart } from '@/core/utils/cart'
import { HeartIcon } from '@heroicons/react/24/outline'
import { useRouter } from 'next/router'
import MobileView from '@/core/components/views/MobileView'
import { toast } from 'react-hot-toast'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { gtagAddToCart } from '@/core/utils/googleTag'
import odooApi from '@/core/api/odooApi'
import { Skeleton } from '@chakra-ui/react'

const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
  const router = useRouter()

  const [quantity, setQuantity] = useState('1')
  const [selectedVariant, setSelectedVariant] = useState(product.id)
  const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
  const [addCartAlert, setAddCartAlert] = useState(false)

  const [isLoadingSLA, setIsLoadingSLA] = useState(true)

  const getLowestPrice = () => {
    const lowest = product.price
    return lowest
  }

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

  useEffect(() => {
    if (selectedVariant) {
      setActiveVariant({
        id: product.id,
        code: product.code,
        name: product.name,
        price: product.price,
        stock: product.stock,
        weight: product.weight
      })
    }
  }, [selectedVariant, product])

  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
    gtagAddToCart(activeVariant, quantity)
    updateItemCart({
      productId: variant,
      quantity,
      programLineId: null,
      selected: true,
      source: null
    })
    setAddCartAlert(true)
  }

  const handleClickBuy = () => {
    if (!validAction()) return

    updateItemCart({
      productId: product.id,
      quantity,
      programLineId: null,
      selected: true,
      source: 'buy'
    })
    router.push(`/shop/checkout?source=buy`)
  }

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

  useEffect(() => {
    const fetchData = async () => {
      const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`)
      product.sla = dataSLA

      setIsLoadingSLA(false)
    }
    fetchData()
  }, [product])

  return (
    <MobileView>
      <Image
        src={product.parent.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={createSlug('/shop/brands/', product.manufacture?.name, product.manufacture?.id)}
            >
              {product.manufacture?.name}
            </Link>
          ) : (
            <div>-</div>
          )}
          <button type='button' className='ml-auto' onClick={toggleWishlist}>
            {wishlist.data?.productTotal > 0 ? (
              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
            ) : (
              <HeartIcon className='w-6' />
            )}
          </button>
        </div>
        <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>

        {activeVariant?.price?.priceDiscount > 0 ? (
          <>
            <div className='flex gap-x-1 items-center'>
              <div className='text-gray_r-11 text-caption-1'>Harga Sebelum PPN :</div>
              <div className='text-gray_r-12 line-through text-caption-1'>
                {' '}
                {currencyFormat(activeVariant?.price?.priceDiscount)}
              </div>
            </div>
            <div className='mt-2'>
              <span className='font-semibold '>Termasuk PPN :</span>
              <div className='flex gap-x-2 items-center mt-2'>
                {activeVariant?.price?.discountPercentage > 0 && (
                  <>
                    <div className='badge-solid-red'>
                      {activeVariant?.price?.discountPercentage}%
                    </div>
                    <div className='text-gray_r-11 line-through text-caption-1'>
                      {currencyFormat(activeVariant?.price?.price * 1.11)}
                    </div>
                  </>
                )}
                <h3 className='text-danger-500 font-semibold'>
                  {currencyFormat(activeVariant?.price?.priceDiscount * 1.11)}
                </h3>
              </div>
            </div>
          </>
        ) : (
          <span className='text-gray_r-11 leading-6 font-normal'>
            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>
        )}
      </div>

      <Divider />

      <div className='p-4'>
        <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='Ketersediaan'>
            <span>
              {isLoadingSLA ? (
                <Skeleton width='100px' height='full' />
              ) : product?.sla?.slaDate != '-' ? (
                <button
                  type='button'
                  title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
                  className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
                    product?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
                  }`}
                >
                  <div
                    className={`flex-1 text-sm  ${
                      product?.sla?.slaDate === 'indent' ? 'text-white' : ''
                    }`}
                  >
                    {product?.sla?.slaDate}
                  </div>
                  <div className='flex-end'>
                    <svg
                      aria-hidden='true'
                      fill='none'
                      stroke='currentColor'
                      stroke-width='1.5'
                      className={`w-7 h-7 text-sm ${
                        product?.sla?.slaDate === 'indent' ? 'text-white' : ''
                      }`}
                    >
                      <path
                        d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
                        stroke-linecap='round'
                        stroke-linejoin='round'
                      ></path>
                    </svg>
                  </div>
                </button>
              ) : (
                '-'
              )}
            </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={whatsappUrl('product', {
                  name: product.name,
                  url: createSlug('/shop/product/', product.name, product.id, true)
                })}
                className='text-danger-500 font-medium'
              >
                Tanya Stok
              </a>
            )}
          </SpecificationContent>
          <SpecificationContent label='Berat Barang'>
            {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
            {activeVariant?.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>
            )}
          </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={productSimilarQuery} />
        </LazyLoad>
      </div>

      <BottomPopup
        title='Berhasil Ditambahkan'
        active={addCartAlert}
        close={() => setAddCartAlert(false)}
      >
        <div className='flex mt-4'>
          <div className='w-[15%]'>
            <Image
              src={product.image}
              alt={product.name}
              className='h-20 object-contain object-center w-full border border-gray_r-4'
            />
          </div>
          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>{product.name}</div>
          <div className='ml-3 flex items-center text-sm 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>
    </MobileView>
  )
}

const informationTabOptions = [
  { value: 'specification', label: 'Spesifikasi' }
  // { 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-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 ProductMobileVariant