import style from '../styles/item.module.css';
import ImageNext from 'next/image';
import { useEffect, useState } from 'react';
import { Tooltip } from '@chakra-ui/react';

import Image from '~/components/ui/image';
import { IProductVariantPromo } from '~/types/promotion';

type Props = {
  variant: IProductVariantPromo;
  isFree?: boolean;
};

const ProductPromoItem = ({ variant, isFree = false }: Props) => {
  const [isSni, setIsSni] = useState(false);
  const [isTkdn, setTkdn] = useState(false);

  useEffect(() => {
    // Lakukan pemanggilan API untuk memeriksa isSni dan isTkdn
    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.item}>
      <div className={style.image}>
        <div className="relative">
          <Image
            src={variant.image || '/images/noimage.jpeg'}
            alt={variant.display_name}
            width={120}
            height={120}
            quality={100}
          />
          <div className="absolute top-0 right-0 flex mt-2">
            {!isSni && (
              <div className="w-2 h-4 sm:h-6 mr-1">
                <ImageNext
                  src="/images/sni-logo.png"
                  alt="SNI Logo"
                  className="object-contain object-top"
                  width={50}
                  height={50}
                />
              </div>
            )}
            {!isTkdn && (
              <div className="w-4 h-5 sm:h-6 ml-1">
                <ImageNext
                  src="/images/TKDN.png"
                  alt="TKDN"
                  className="object-contain object-top"
                  width={50}
                  height={50}
                />
              </div>
            )}
          </div>
        </div>

        <div className={style.quantity}>
          {variant.qty} pcs {isFree ? '(free)' : ''}
        </div>
      </div>
      <Tooltip label={variant.display_name} placement="top" fontSize="sm">
        <div className={style.name}>{variant.name}</div>
      </Tooltip>
    </div>
  );
};

export default ProductPromoItem;