path: root/src-migrate/modules/product-detail/components/AddToCart.tsx

import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import style from '../styles/price-action.module.css';
import { Button, ButtonProps, Link, useToast } from '@chakra-ui/react';
import product from 'next-seo/lib/jsonld/product';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Image from '~/components/ui/image';
import { getAuth } from '~/libs/auth';
import { upsertUserCart } from '~/services/cart';
import LazyLoad from 'react-lazy-load';
import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
import { IProductDetail } from '~/types/product';
import ImageNext from 'next/image';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import { createSlug } from '~/libs/slug';
import formatCurrency from '~/libs/formatCurrency';
import { useProductDetail } from '../stores/useProductDetail';
import { gtagAddToCart } from '@/core/utils/googleTag';
import axios from 'axios';
import useDevice from '@/core/hooks/useDevice';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import ProductPromoSection from '~/modules/product-promo/components/Section';
type Props = {
  variantId: number | null;
  quantity?: number;
  source?: 'buy' | 'add_to_cart';
  products: IProductDetail;

  buttonProps?: ButtonProps;
  children?: (props: { onClick: () => Promise<void>; isLoading: boolean }) => React.ReactNode;
};

type Status = 'idle' | 'loading' | 'success';

const AddToCart = ({
  variantId,
  quantity = 1,
  source = 'add_to_cart',
  products,

  buttonProps,
  children,
}: Props) => {
  let auth = getAuth();
  const router = useRouter();
  const toast = useToast({
    position: 'top',
    isClosable: true,
  });

  const { isMobile, isDesktop } = useDevice();

  const { askAdminUrl, selectedVariant } = useProductDetail();

  const [product, setProducts] = useState(products);
  const [status, setStatus] = useState<Status>('idle');
  const {
    productCart,
    setRefreshCart,
    setProductCart,
    refreshCart,
    isLoading,
    setIsloading,
  } = useProductCartContext();
  const [activeVariant, setActiveVariant] = useState({
    id: 0,
    code: '',
    name: '',
    price: '',
    stock: '',
    weight: '',
    isFlashSale: false,
  });
  const hasPrice = Number(selectedVariant?.price?.price_discount || 0) > 0;

  useEffect(() => {
    const fetchData = async () => {
      if (variantId) {
        let response = await axios(
          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/variant-detail?id=${variantId}`
        );
        let productVariant = response.data;
        if (productVariant) {
          setActiveVariant({
            id: productVariant[0].id,
            code: productVariant[0].code,
            name: productVariant[0].name,
            price: productVariant[0].price.price,
            stock: productVariant[0].stockTotal,
            weight: productVariant[0].weight,
            isFlashSale: productVariant[0].isFlashsale,
          });
        }
      }
    };
    fetchData();
  }, [variantId]);

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

  const handleButton = async () => {
    let isLoggedIn = typeof auth === 'object';

    if (!isLoggedIn) {
      const currentUrl = encodeURIComponent(router.asPath);
      await router.push(`/login?next=${currentUrl}`);

      // Tunggu login berhasil, misalnya dengan memantau perubahan status auth.
      const authCheckInterval = setInterval(() => {
        const newAuth = getAuth();
        if (typeof newAuth === 'object') {
          isLoggedIn = true;
          auth = newAuth; // Update nilai auth setelah login
          clearInterval(authCheckInterval);
        }
      }, 500); // Periksa status login setiap 500ms

      await new Promise((resolve) => {
        const checkLogin = setInterval(() => {
          if (isLoggedIn) {
            clearInterval(checkLogin);
            resolve(null);
          }
        }, 500);
      });
    }

    if (!variantId || isNaN(quantity) || typeof auth !== 'object') return;
    if (status === 'success') return;
    setStatus('loading');
    await upsertUserCart({
      userId: auth.id,
      type: 'product',
      id: variantId,
      qty: quantity,
      selected: true,
      source: source,
      qtyAppend: true,
    });
    setStatus('idle');
    setRefreshCart(true);
    
    if (!children) {
        setAddCartAlert(true);
    }

    gtagAddToCart(activeVariant, quantity);

    toast({
      title: 'Tambah ke keranjang',
      description: 'Berhasil menambahkan barang ke keranjang belanja',
      status: 'success',
      duration: 3000,
      isClosable: true,
      position: 'top',
    });

    if (source === 'buy') {
      router.push('/shop/checkout?source=buy');
    }
  };
  useEffect(() => {
    if (status === 'success')
      setTimeout(() => {
        setStatus('idle');
      }, 3000);
  }, [status]);

  if (children) {
    return (
      <div className='w-full'>
        {children({ onClick: handleButton, isLoading: status === 'loading' })}
      </div>
    );
  }

  const btnConfig = {
    add_to_cart: {
      colorScheme: 'red',
      variant: 'outline',
      text: 'Keranjang',
    },
    buy: {
      colorScheme: 'red',
      variant: 'solid',
      text: isDesktop ? 'Beli' : 'Beli Sekarang',
    },
  };

  return (
    <div className='w-full'>
      <MobileView>
        <Button
          onClick={handleButton}
          colorScheme={btnConfig[source].colorScheme}
          variant={btnConfig[source].variant}
          className='w-full'
          isDisabled={!hasPrice || status === 'loading'}

          {...buttonProps}
        >
          {btnConfig[source].text}
        </Button>
      </MobileView>

      <DesktopView>
        <Button
          onClick={handleButton}
          colorScheme={btnConfig[source].colorScheme}
          variant={btnConfig[source].variant}
          className='w-full'
          isDisabled={!hasPrice || status === 'loading'}

          {...buttonProps}
        >
          {btnConfig[source].text}
        </Button>
      </DesktopView>

      <BottomPopup
        className='!container'
        title='Berhasil Ditambahkan'
        active={addCartAlert}
        close={() => setAddCartAlert(false)}
      >
        {/* ===== MOBILE LAYOUT: konten scroll + footer fixed di dalam popup ===== */}
        <div className='md:hidden flex flex-col max-h-[75vh]'>
          {/* area scroll */}
          <div
            className='flex-1 overflow-y-auto'
            style={{ scrollbarWidth: 'none' }}
          >
            {/* HEADER ITEM */}
            <div className='flex mt-4'>
              <div className='w-[25%]'>
                <ImageNext
                  src={product.image}
                  alt={product.name}
                  className='h-32 object-contain object-center w-full border border-gray_r-4'
                  width={80}
                  height={80}
                />
              </div>

              <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
                {!!product.manufacture.name ? (
                  <Link
                    href={createSlug(
                      '/shop/brands/',
                      product.manufacture.name,
                      product.manufacture.id.toString()
                    )}
                    className=' hover:underline'
                    color={'red'}
                  >
                    {product.manufacture.name}
                  </Link>
                ) : (
                  '-'
                )}
                <p className='text-ellipsis overflow-hidden'>{product.name}</p>
                <p>{product.code}</p>

                {!!product.lowest_price && product.lowest_price.price > 0 && (
                  <>
                    <div className='flex items-end gap-x-2'>
                      {product.lowest_price.discount_percentage > 0 && (
                        <>
                          <div className='badge-solid-red'>
                            {Math.floor(
                              product.lowest_price.discount_percentage
                            )}
                            %
                          </div>
                          <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                            Rp {formatCurrency(product.lowest_price.price || 0)}
                          </div>
                        </>
                      )}
                      <div className='text-danger-500 font-semibold'>
                        Rp{' '}
                        {formatCurrency(
                          product.lowest_price.price_discount || 0
                        )}
                      </div>
                    </div>
                  </>
                )}

                {!!product.lowest_price && product.lowest_price.price === 0 && (
                  <span>
                    Hubungi kami untuk dapatkan harga terbaik,{' '}
                    <Link
                      href={askAdminUrl}
                      target='_blank'
                      className='font-medium underline'
                      color={'red'}
                    >
                      klik disini
                    </Link>
                  </span>
                )}
              </div>

              {/* sembunyikan link header di mobile agar tidak dobel */}
              <div className='ml-3 items-center font-normal hidden md:flex'>
                <Link
                  href='/shop/cart'
                  className='flex-1 py-2 text-gray_r-12 btn-yellow'
                >
                  Lihat Keranjang
                </Link>
              </div>
            </div>

            {/* PROMO KHUSUS MOBILE */}
            <div className='mt-6'>
              <ProductPromoSection
                product={product}
                productId={Number(activeVariant?.id) || Number(variantId) || 0}
              />
            </div>

            {/* PRODUCT SIMILAR */}
            <div className='mt-8 mb-4'>
              <div className='text-h-sm font-semibold mb-6'>
                Kamu Mungkin Juga Suka
              </div>
              <DesktopView>
                <LazyLoad>
                  <ProductSimilar query={productSimilarQuery} />
                </LazyLoad>
              </DesktopView>
              <MobileView>
                <ProductSimilar query={productSimilarQuery} />
              </MobileView>
            </div>
          </div>

          {/* footer tombol: selalu terlihat di bawah popup mobile */}
          <div className='border-t border-gray-200 bg-white px-4 pt-3 pb-[calc(env(safe-area-inset-bottom)+12px)]'>
            <Link
              href='/shop/cart'
              className='w-full mb-2 block text-center btn-yellow py-3 rounded-xl font-semibold'
            >
              Lihat Keranjang
            </Link>
          </div>
        </div>

        {/* ===== DESKTOP LAYOUT: tetap seperti semula ===== */}
        <div className='hidden md:block'>
          {/* HEADER ITEM */}
          <div className='flex mt-4'>
            <div className='w-[10%]'>
              <ImageNext
                src={product.image}
                alt={product.name}
                className='h-32 object-contain object-center w-full border border-gray_r-4'
                width={80}
                height={80}
              />
            </div>

            <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
              {!!product.manufacture.name ? (
                <Link
                  href={createSlug(
                    '/shop/brands/',
                    product.manufacture.name,
                    product.manufacture.id.toString()
                  )}
                  className=' hover:underline'
                  color={'red'}
                >
                  {product.manufacture.name}
                </Link>
              ) : (
                '-'
              )}
              <p className='text-ellipsis overflow-hidden'>{product.name}</p>
              <p>{product.code}</p>

              {!!product.lowest_price && product.lowest_price.price > 0 && (
                <>
                  <div className='flex items-end gap-x-2'>
                    {product.lowest_price.discount_percentage > 0 && (
                      <>
                        <div className='badge-solid-red'>
                          {Math.floor(product.lowest_price.discount_percentage)}
                          %
                        </div>
                        <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                          Rp {formatCurrency(product.lowest_price.price || 0)}
                        </div>
                      </>
                    )}
                    <div className='text-danger-500 font-semibold'>
                      Rp{' '}
                      {formatCurrency(product.lowest_price.price_discount || 0)}
                    </div>
                  </div>
                </>
              )}

              {!!product.lowest_price && product.lowest_price.price === 0 && (
                <span>
                  Hubungi kami untuk dapatkan harga terbaik,{' '}
                  <Link
                    href={askAdminUrl}
                    target='_blank'
                    className='font-medium underline'
                    color={'red'}
                  >
                    klik disini
                  </Link>
                </span>
              )}
            </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>

          {/* PROMO (desktop biarkan sama posisinya) */}
          <div className='mt-6'>
            <ProductPromoSection
              product={product}
              productId={Number(activeVariant?.id) || Number(variantId) || 0}
            />
          </div>

          {/* PRODUCT SIMILAR */}
          <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>
        </div>
      </BottomPopup>
    </div>
  );
};

export default AddToCart;