import style from '../styles/item.module.css'

import Image from 'next/image'
import React from 'react'
import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
import { InfoIcon } from 'lucide-react'

import { PROMO_CATEGORY } from '~/constants/promotion'

import formatCurrency from '~/libs/formatCurrency'
import { CartItem as CartItemProps } from '~/types/cart'

import CartItemPromo from './ItemPromo'
import CartItemAction from './ItemAction'
import CartItemSelect from './ItemSelect'

type Props = {
  item: CartItemProps
  editable?: boolean
}

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

  return (
    <div className={style.wrapper}>
      {item.cart_type === 'promotion' && (
        <div className={style.header}>
          {item.promotion_type?.value && (
            <Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
              <div className={style.badgeType}>
                Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
                <InfoIcon size={14} />
              </div>
            </Tooltip>
          )}
          <div className='w-2' />
          <div>
            Selamat! Pembelian anda lebih hemat {' '}
            <span className={style.savingAmt}>
              Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
            </span>
          </div>
        </div>
      )}

      <div className={style.mainProdWrapper}>
        {editable && <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='mt-2 flex justify-between w-full'>
            <div className='flex flex-col gap-y-1'>
              {item.cart_type === 'promotion' && (
                <div className={style.discPriceSection}>
                  <span className={style.priceBefore}>
                    Rp {formatCurrency((item.package_price || 0))}
                  </span>
                  <span className={style.price}>
                    Rp {formatCurrency(item.price.price)}
                  </span>
                </div>
              )}

              {item.cart_type === 'product' && (
                <>
                  <div className={style.price}>
                    Rp {formatCurrency(item.price.price)}
                  </div>
                  <div>{item.code}</div>
                </>
              )}

              <div>
                {item.weight} Kg
              </div>
            </div>

            {editable && <CartItemAction item={item} />}
            {!editable && <div className={style.quantity}>{item.quantity}</div>}
          </div>
        </div>

      </div>

      <div className="flex flex-col">
        {item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
        {item.free_products?.map((product) => <CartItemPromo 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