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 }) => {
  const [showAll, setShowAll] = useState(false)
  const variantsToShow = showAll ? variants : variants.slice(0, 2)

  return (
    <>
      {variantsToShow?.map((variant, index) => (
        <div
          key={index}
          className='shadow border border-gray rounded-md p-4 mb-1 shadow-sm bg-white'
        >
          <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'>
                    <div className='mb-2'>
                      <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
                        {variant.program.type.label}
                      </span>
                    </div>
                    <p className='product-card__title wrap-line-ellipsis-2'>{item.name}</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-1'>
                      {item.price.discountPercentage > 0 && (
                        <>
                          <p className='text-caption-2 text-gray_r-11 line-through'>
                            {currencyFormat(item.price.price)}
                          </p>
                        </>
                      )}
                    </div>
                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>Gratis</p>
                  </div>
                </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