import { Button, Spinner, useToast } from '@chakra-ui/react'
import { CheckIcon, PlusIcon } from 'lucide-react'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

import { getAuth } from '~/libs/auth'
import { upsertUserCart } from '~/services/cart'
import { IPromotion, IProductVariantPromo } from '~/types/promotion'

import DesktopView from '../../../../src/core/components/views/DesktopView';
import MobileView from '../../../../src/core/components/views/MobileView';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import ImageNext from 'next/image';
import Link from 'next/link'
import LazyLoad from 'react-lazy-load'
import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
import { IProductDetail } from '~/types/product';
import { useProductCartContext } from '@/contexts/ProductCartContext'
import { createSlug } from '~/libs/slug'
import formatCurrency from '~/libs/formatCurrency'
import { useProductDetail } from '../../product-detail/stores/useProductDetail';
type Props = {
  promotion: IPromotion
  product: IProductDetail
  variant: IProductVariantPromo,
}

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

const ProductPromoAddToCart = ({product, promotion, variant }: Props) => {
  const auth = getAuth()
  const toast = useToast()
  const router = useRouter()
  const {askAdminUrl} = useProductDetail();
  const [status, setStatus] = useState<Status>('idle')
  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
    useProductCartContext()
  const productSimilarQuery = [
    promotion?.name,
    `fq=-product_id_i:${promotion.products[0].product_id}`,
  ].join('&');
  const [addCartAlert, setAddCartAlert] = useState(false);
  
  const handleButton = async () => {
    if (typeof auth !== 'object') {
    const currentUrl = encodeURIComponent(router.asPath)
    router.push(`/login?next=${currentUrl}`)
    return
  }
  if (status === 'success') return
  setStatus('loading')
  await upsertUserCart({
    userId: auth.id,
    type: 'promotion',
    id: promotion.id,
    qty: 1,
    selected: true,
    source: 'add_to_cart',
    qtyAppend: true
  })
  setStatus('idle')
  setRefreshCart(true);
  setAddCartAlert(true);
  toast({
    title: 'Tambah ke keranjang',
    description: 'Berhasil menambahkan barang ke keranjang belanja',
    status: 'success',
    duration: 3000,
    isClosable: true,
    position: 'top',
  })
}

  useEffect(() => {
    if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
  }, [status])

  return (
    <div>
      <MobileView>
        <Button
          colorScheme='yellow'
          px={2}
          w='36px'
          gap={1}
          isDisabled={status === 'loading'}
          onClick={handleButton}
        >
          {status === 'success' && <CheckIcon size={16} />}
          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
          {status === 'idle' && <PlusIcon size={16} />}

          {status === 'success' && <span>Berhasil</span>}
          {/* {status !== 'success' && <span>Keranjang</span>} */}
        </Button>
      </MobileView>
      <DesktopView>
        <Button
          colorScheme='yellow'
          px={2}
          w='110px'
          gap={1}
          isDisabled={status === 'loading'}
          onClick={handleButton}
        >
          {status === 'success' && <CheckIcon size={16} />}
          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
          {status === 'idle' && <PlusIcon size={16} />}

          {status === 'success' && <span>Berhasil</span>}
          {status !== 'success' && <span>Keranjang</span>}
        </Button>
        <BottomPopup
          className='!container'
          title='Berhasil Ditambahkan'
          active={addCartAlert}
          close={() => {
            setAddCartAlert(false);
          }}
        >
          <div className='flex mt-4'>
            <div className='w-[10%]'>
            <ImageNext
                src={
                  product?.image
                    ? product?.image
                    : variant?.image || '' 
                }
                alt={product?.name ? product?.name : variant?.display_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 || variant?.manufacture && (
                  <Link
                  href={createSlug('/shop/brands/', product?.manufacture?.name? product?.manufacture?.name : variant?.manufacture?.manufacture_name, product?.manufacture?.id? product?.manufacture?.id.toString() : variant?.manufacture?.manufacture_id.toString())}
                  className=' hover:underline text-red-500'
                  color={"red"}
                  >
                    {product?.manufacture?.name ? product?.manufacture?.name : variant?.manufacture?.manufacture_name}
                  </Link>
                )}
              <p className='text-ellipsis overflow-hidden'>
                {product?.name ? product?.name : variant?.name}
                </p>
                <p>
                  {product?.code}
                </p>
                {(!!product?.lowest_price && product?.lowest_price?.price > 0) || variant?.price?.price > 0 && (
                    <>
                      <div className='flex items-end gap-x-2'>
                        {(product?.lowest_price?.discount_percentage > 0) || variant?.price?.discount_percentage > 0 && (
                          <>
                            <div className='badge-solid-red'>
                              {Math.floor(product?.lowest_price?.discount_percentage ? product?.lowest_price?.discount_percentage : variant?.price?.discount_percentage)}%
                            </div>
                            <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                              Rp {formatCurrency(product?.lowest_price?.price ? product?.lowest_price?.price || 0 : variant?.price?.price || 0)}
                            </div>
                          </>
                        )}
                        <div className='text-danger-500 font-semibold'>
                          Rp {formatCurrency(product?.lowest_price?.price_discount? product?.lowest_price?.price_discount || 0 : variant?.price?.price_discount)}
                        </div>
                      </div>
                    </>
                  )}

                  {(!!product?.lowest_price && product?.lowest_price?.price === 0) || variant?.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>
          <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>
      </DesktopView>
    </div>
  )
}

export default ProductPromoAddToCart