import style from '../styles/product-card.module.css'

import Link from 'next/link'
import React, { useMemo } from 'react'
import Image from '~/components/ui/image'
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'

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

const ProductCard = ({ product, layout = 'vertical' }: Props) => {
  const URL = {
    product: createSlug('/shop/product/', product.name, product.id.toString()),
    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}>
          <Image
            src={image}
            alt={product.name}
            width={128}
            height={128}
            className='object-contain object-center h-full w-full'
          />
          {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 * 1.11))}
        </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