import style from '../styles/product-card.module.css'
import ImageNext from 'next/image';
import clsx from 'clsx'
import Link from 'next/link'
import React, { useEffect, useMemo, useState } from 'react'
import Image from '~/components/ui/image'
import useUtmSource from '~/hooks/useUtmSource'
import clsxm from '~/libs/clsxm'
import formatCurrency from '~/libs/formatCurrency'
import { formatToShortText } from '~/libs/formatNumber'
import { createSlug } from '~/libs/slug'
import { IProduct } from '~/types/product'
import { useRouter } from 'next/router';
import currencyFormat from '@/core/utils/currencyFormat';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { sellingProductFormat } from '@/core/utils/formatValue';

type Props = {
  product: IProduct
  layout?: 'vertical' | 'horizontal'
}

const ProductCard = ({ product, layout = 'vertical' }: Props) => {
  const utmSource = useUtmSource()
  const router = useRouter();

  const ppnString = process.env.NEXT_PUBLIC_PPN;
  const ppnNumber = ppnString !== undefined ? Number(ppnString) : 0;

  const id = product.id.toString ()
  const callForPriceWhatsapp = whatsappUrl('product', {
    name: product.name,
    manufacture: product.manufacture?.name,
    url: createSlug('/shop/product/', product.name, id, true),
  });

  const URL = {
    product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
    manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
  }

  const image = useMemo(() => {
    if (product.image) return product.image + '?ratio=square'
    return '/images/noimage.jpeg'
  }, [product.image])

  return (
    <div className={clsxm(style['wrapper'], {
      [style['wrapper-v']]: layout === 'vertical',
      [style['wrapper-h']]: layout === 'horizontal',
    })}
    >
      <div className={clsxm('relative', {
        [style['image-v']]: layout === 'vertical',
        [style['image-h']]: layout === 'horizontal',
      })}>
        <Link href={URL.product}>
          
        <div className="relative">
          <Image
            src={image}
            alt={product.name}
            width={128}
            height={128}
            className='object-contain object-center h-full w-full'
          />
          <div className="absolute top-0 right-0 flex  mt-2">
            <div className="gambarB ">
              {product.isSni && (
                <ImageNext
                  src="/images/sni-logo.png"
                  alt="SNI Logo"
                  className="w-3 h-4 object-contain object-top   sm:h-4"
                  width={50}
                  height={50}
                />
              )}
            </div>
            <div className="gambarC  ">
              {product.isTkdn && (
                <ImageNext
                  src="/images/TKDN.png"
                  alt="TKDN"
                  className="w-5 h-4 object-contain object-top  ml-1 mr-1 sm:h-6"
                  width={50}
                  height={50}
                />
              )}
            </div>
          </div>
        </div>
        {layout === 'vertical' && (
          <div>
            {router.pathname != '/' && product?.flash_sale.id > 0 && (
                <div className='absolute left-0 bottom-0 w-full grid'>
                  <div className='absolute  bottom-0 w-full h-full'>
                    <ImageNext
                      src='/images/BG-FLASH-SALE.jpg'
                      className='h-full'
                      width={1000}
                      height={100} alt={''}                />
                  </div>
                  <div className='relative'>
                    <div className='flex gap-x-1 items-center p-2 justify-center'>
                      <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
                        <span className='text-sm font-bold text-black'>
                          {Math.floor(product?.lowest_price.discount_percentage ? product?.lowest_price.discount_percentage : product?.lowest_price.discountPercentage)}%
                        </span>
                      </div>
                      <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
                        <ImageNext
                          src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                          width={13}
                          height={5} alt={''}                    />
                        <span className='text-white text-[9px] md:text-[10px] font-semibold'>
                          {product?.flash_sale?.tag != 'false' ||
                          product?.flash_sale?.tag
                            ? product?.flash_sale?.tag
                            : 'FLASH SALE'}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              )}
          </div>
        )}

          {product.variant_total > 1 && (
            <div className={style['variant-badge']}>{product.variant_total} Varian</div>
          )}
        </Link>
      </div>

      <div className={clsxm({
        [style['content-v']]: layout === 'vertical',
        [style['content-h']]: layout === 'horizontal',
      })}>
        {layout === 'horizontal' && (
          <div>
              {product.flash_sale.id > 0 && (
              <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
                <ImageNext
                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                    width={15}
                    height={10} alt={''}                />
                <span className='text-white text-xs font-semibold'>
                  {' '}
                  {product?.flash_sale?.tag != 'false' || product?.flash_sale?.tag
                    ? product?.flash_sale?.tag
                    : 'FLASH SALE'}
                </span>
              </div>
            )}
          </div>
        )}
        <Link
          href={URL.manufacture}
          className={style['brand']}
        >
          {product.manufacture.name}
        </Link>

        <div className='h-0.5' />

        <Link
          href={URL.product}
          className={clsxm(style['name'], {
            [style['name-v']]: layout === 'vertical',
            [style['name-h']]: layout === 'horizontal',
          })}
        >
          {product.name}
        </Link>

        <div className='h-1.5' />
      {product?.lowest_price.discountPercentage === undefined ? (
        <div>
          {product?.flash_sale?.id > 0 &&
          product?.lowest_price.discount_percentage > 0 ? (
            <>
              <div className='flex gap-x-1 mb-1 items-center'>
                <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                  {currencyFormat(product.lowest_price.price)}
                </div>
                <div className='badge-solid-red'>
                  {Math.floor(product?.lowest_price.discount_percentage)}%
                </div>
              </div>
              <div className='text-danger-500 font-semibold mb-2'>
                {product?.lowest_price.price_discount > 0 ? (
                  currencyFormat(product?.lowest_price.price_discount)
                ) : (
                  <a
                    rel='noopener noreferrer'
                    target='_blank'
                    href={callForPriceWhatsapp}
                  >
                    Call for Inquiry
                  </a>
                )}
              </div>
            </>
          ) : (
            <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
              {product?.lowest_price.price > 0 ? (
                <>
                  {currencyFormat(product?.lowest_price.price)}
                  <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
                    Inc. PPN:{' '}
                    {currencyFormat(
                      product.lowest_price.price * ppnNumber
                    )}
                  </div>
                </>
              ) : (
                <a
                  rel='noopener noreferrer'
                  target='_blank'
                  href={callForPriceWhatsapp}
                >
                  Call for Inquiry
                </a>
              )}
            </div>
          )}

          <div className='flex w-full items-center gap-x-1 '>
            {product?.stock_total > 0 && (
              <div className='badge-solid-red'>Ready Stock</div>
            )}
            {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
            {product?.qty_sold > 0 && (
              <div className='text-gray_r-9 text-[11px]'>
                {sellingProductFormat(product?.qty_sold) + ' Terjual'}
              </div>
            )}
          </div>
        </div>
      ) : (
        <div>
          
        </div>
      )}
        


      </div>
    </div>
  )
}

const classPrefix = ({ layout }: Props) => {

}

export default ProductCard