import Image from 'next/image'
import React from 'react'
import formatCurrency from '~/common/libs/formatCurrency'
import { CartItem as CartItemProps } from '~/common/types/cart'
import ProductPromo from './ProductPromo'
import { Skeleton, SkeletonProps } from '@chakra-ui/react'
import style from '../styles/CartItem.module.css'
import CartItemAction from '../components/CartItemAction'
import CartItemSelect from '../components/CartItemSelect'

type Props = {
  item: CartItemProps
}

const CartItem = ({ item }: Props) => {
  const image = item?.image || item?.parent?.image

  return (
    <div className={style.wrapper}>
      <div className={style.mainProdWrapper}>
        <CartItemSelect item={item} />
        <div className='w-4' />
        <div className={style.image}>
          {image && <Image src={image} alt={item.name} width={128} height={128} />}
          {!image && <div className={style.noImage}>No Image</div>}
        </div>

        <div className={style.details}>
          <div className={style.name}>{item.name}</div>
          <div className={style.spacing2} />
          {item.cart_type === 'promotion' && (
            <div className={style.discPriceSection}>
              <span className={style.priceBefore}>
                Rp {formatCurrency((item.package_price || 0))}
              </span>
              <span className={style.savingAmt}>
                Hemat Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
              </span>
              <span className={style.price}>
                Rp {formatCurrency(item.subtotal)}
              </span>
            </div>
          )}
          {item.cart_type === 'product' && (
            <>
              <div className={style.price}>
                Rp {formatCurrency(item.price.price)}
              </div>
              <div>{item.code}</div>
            </>
          )}
          <div>
            <span className={style.weightLabel}>Berat barang: </span>
            {item.weight} Kg
          </div>
        </div>

        <CartItemAction item={item} />
      </div>

      <div className="flex flex-col">
        {item.products?.map((product) => <ProductPromo key={product.id} product={product} />)}
        {item.free_products?.map((product) => <ProductPromo key={product.id} product={product} />)}
      </div>
    </div>
  )
}

CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
  return Array.from({ length: props.count }).map((_, index) => (
    <Skeleton key={index}
      height='100px'
      width='100%'
      rounded='md'
      {...props}
    />
  ))
}

export default CartItem