import { useState } from 'react'
import VariantCard from './VariantCard'
import Image from '@/core/components/elements/Image/Image'
import currencyFormat from '@/core/utils/currencyFormat'

const VariantGroupCard = ({ variants, ...props }) => {
  console.log('variant', variants)
  const [showAll, setShowAll] = useState(false)
  const variantsToShow = showAll ? variants : variants.slice(0, 2)

  return (
    <>
      {variantsToShow?.map((variant, index) => (
        <>
          <VariantCard key={index} product={variant} {...props} />
          {variant.program &&
            variant.program.items &&
            variant.program.items.map((item) => (
              <div key={item.id}>
                <div className='flex gap-x-3'>
                  <div className='w-4/12 flex items-center gap-x-2'>
                    <Image
                      src={item.parent.image}
                      alt={item.name}
                      className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
                    />
                  </div>
                  <div className='w-8/12 flex flex-col'>
                    <p className='product-card__title wrap-line-ellipsis-2'>
                      {item.name}
                    </p>
                    <p className='text-caption-2 text-gray_r-11 mt-1'>
                      {/* {product.code || '-'}
                      {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} */}
                    </p>
                    <p className='text-caption-2 text-gray_r-11 mt-1'>
                      Berat Item : {item.weight} Kg
                    </p>
                    <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
                      {item.price.discountPercentage > 0 && (
                        <>
                          <p className='text-caption-2 text-gray_r-11 line-through'>
                            {currencyFormat(item.price.price)}
                          </p>
                          <span className='badge-red'>{item.price.discountPercentage}%</span>
                        </>
                      )}
                    </div>
                    <p className='text-caption-2 text-gray_r-11 mt-1'>
                      {item.price.priceDiscount > 0
                        ? currencyFormat(item.price.priceDiscount) +
                          ' × ' +
                          item.quantity +
                          ' Barang'
                        : ''}
                    </p>
                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>
                      {item.price.priceDiscount > 0 ? (
                        currencyFormat(item.quantity * item.price.priceDiscount)
                      ) : (
                        <a
                          href={whatsappUrl('product', {
                            name: item.name,
                            url: createSlug('/shop/product/', item.name, item.id, true)
                          })}
                          className='underline text-danger-500'
                        >
                          Call For Price{' '}
                        </a>
                      )}
                    </p>
                  </div>
                </div>
              </div>
            ))}
        </>
      ))}
      {variants.length > 2 && (
        <button
          type='button'
          className='btn-light py-2 w-full'
          onClick={() => setShowAll(!showAll)}
        >
          {!showAll ? `Lihat Semua +${variants.length - variantsToShow.length}` : 'Tutup'}
        </button>
      )}
    </>
  )
}

export default VariantGroupCard