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';

import { BadgePercent } from 'lucide-react';

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} />
          {item.cart_type === 'product' && item.voucher_pasti_hemat && (
            <span className={style.voucherBadge}>
              <BadgePercent size={14} />
              Bisa pakai voucher pasti hemat
            </span>
          )}

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

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

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