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 useDevice from '@/core/hooks/useDevice';
type Props = {
  product: IProduct;
  layout?: 'vertical' | 'horizontal';
};

const PPN : number = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0;
const ProductCard = ({ product, layout = 'vertical' }: Props) => {
  const utmSource = useUtmSource();
  const { isDesktop, isMobile } = useDevice();

  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 (!isDesktop && product.image_mobile) {
      return product.image_mobile + '?ratio=square';
    } else {
      if (product.image) return product.image + '?ratio=square';
      return '/images/noimage.jpeg';
    }
  }, [product.image, product.image_mobile]);

  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>

          {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',
        })}
      >
        <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' />

        <div className={style['price']}>
          Rp {formatCurrency(product.lowest_price.price)}
        </div>

        <div className='h-1.5' />

        <div className={style['price-inc']}>
          Inc PPN: Rp{' '}
          {formatCurrency(Math.round(product.lowest_price.price * PPN))}
        </div>

        <div className='h-1' />

        <div className='flex items-center gap-x-2.5'>
          {product.stock_total > 0 && (
            <div className={style['ready-stock']}>Ready Stock</div>
          )}
          {product.qty_sold > 0 && (
            <div className={style['sold']}>
              {formatToShortText(product.qty_sold)} Terjual
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

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

export default ProductCard;