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

import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
import { InfoIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import ImageNext from 'next/image';
import { useEffect, useState } from 'react';
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
}

const CartItem = ({ item, editable = true }: Props) => {
  const [isSni, setIsSni] = useState(false);
  const [isTkdn, setTkdn] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const responseSni = await fetch('URL_API_SNI');
        const dataSni = await responseSni.json();
        setIsSni(dataSni && dataSni.sni);

        const responseTkdn = await fetch('URL_API_TKDN');
        const dataTkdn = await responseTkdn.json();
        setTkdn(dataTkdn && dataTkdn.tkdn);
      } catch (error) {
        console.error('Error fetching data:', error);
        setIsSni(false);
        setTkdn(false);
      }
    };

    fetchData();

    return () => {};
  }, []);

  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} isSni={isSni} isTkdn={isTkdn} />

        <div className={style.details}>
          <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, isSni, isTkdn }: { item: CartItemProps, isSni: boolean, isTkdn: boolean }) {
  const image = item?.image || item?.parent?.image

  return (
    <>
      {item.cart_type === 'promotion' && (
        <div className={style.image}>
          {image && <Image src={image} alt={item.name} width={128} height={128} />}
          {!image && <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} />}
          
          <div className="relative top-2 right-4 flex">
            {/* <div className="gambarB mr-1 bg-red-100"> */}
              {!isSni && (
                <ImageNext
                  src="/images/sni-logo.png"
                  alt="SNI Logo"
                  className="w-4 h-3 object-contain object-top sm:h-4"
                  width={50}
                  height={50}
                />
              )}
            {/* </div> */}
            {/* <div className="gambarC bg-red-500"> */}
              {!isTkdn && (
                <ImageNext
                  src="/images/TKDN.png"
                  alt="TKDN"
                  className="w-10 h-5 object-contain object-top ml-1 mr-1 sm:h-10"
                  width={50}
                  height={50}
                />
              )}
            {/* </div> */}
          </div>
          {!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