import style from '../styles/item.module.css'
import odooApi from '~/libs/odooApi';
import { useEffect, useState } from 'react';
import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
import { InfoIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'

import { PROMO_CATEGORY } from '~/constants/promotion'
import formatCurrency from '~/libs/formatCurrency'
import { createSlug } from '~/libs/slug'
import { CartItem as CartItemProps } from '~/types/cart'

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

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

const CartItem = ({ item, editable = true, selfPicking}: Props) => {
  const [qtyPickUp, setQtyPickUp] = useState(0);
  useEffect(() => {
    const fetchData = async () => {
      const qty_available = await odooApi(
        'GET',
        `/api/v1/product_variant/${item.id}/qty_available`
      );
      setQtyPickUp(qty_available?.qty);
    };
    fetchData();
  }, [item]);
  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' />

        <CartItem.Image item={item} />

        <div className={style.details}>
          {qtyPickUp > 0 && (
            <div className='text-[10px] text-red-500 italic'>
              {item.quantity <= qtyPickUp
                ? '*Barang ini bisa di pickup maksimal pukul 16.00'
                : `*${qtyPickUp} Barang ini bisa di pickup maksimal pukul 16.00`}
            </div>
          )}
          <CartItem.Name item={item} />

          <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.discPriceSection}>
                  {item.price.discount_percentage > 0 && (
                    <span className={style.priceBefore}>
                      Rp {formatCurrency((item.price.price || 0))}
                    </span>
                  )}

                  <div className={style.price}>
                    {item.price.price_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
                    {item.price.price_discount === 0 && '-'}
                  </div>
                </div>
              )}

              <div>{item.cart_type === 'product' && item.code}</div>
              <div>{Math.round(item.weight * 10) / 10} 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.Image = function CartItemImage({ item }: { item: CartItemProps }) {
  const image = item?.image || item?.parent?.image
  const imageProgram = item?.image_program ? item.image_program[0] : item?.parent?.image;

  return (  
    <>
      {item.cart_type === 'promotion' && (
        <div className={style.image}>
          {imageProgram && <Image src={imageProgram} alt={item.name} width={128} height={128} />}
          {!imageProgram && <div className={style.noImage}>No Image</div>}
        </div>
      )}

      {item.cart_type === 'product' && (
        <Link
          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
          className={style.image}
        >
          {image && <Image src={image} alt={item.name} width={128} height={128} />}
          {!image && <div className={style.noImage}>No Image</div>}
        </Link>
      )}
    </>
  )
}

CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
  return (
    <>
      {item.cart_type === 'promotion' && (
        <div className={style.name}>{item.name}</div>
      )}

      {item.cart_type === 'product' && (
        <Link
          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
          className={style.name}
        >
          {item.name}
        </Link>
      )}
    </>
  )
}

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