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

import { IProductDetail } from '~/types/product'
import ImageUI from '~/components/ui/image'
import moment from 'moment';

type Props = {
  product: IProductDetail
}

const Image = ({ product }: Props) => {
  const flashSale = product.flash_sale

  const [count, setCount] = useState(flashSale?.remaining_time || 0);

  const [isSni, setIsSni] = useState(false);
  const [isTkdn, setTkdn] = useState(false);

  useEffect(() => {
    // Lakukan pemanggilan API untuk memeriksa isSni
    const fetchSniData = async () => {
      try {
        const response = await fetch('URL_API_SNI');
        const data = await response.json();
        if (data && data.sni) {
          setIsSni(true);
        } else {
          setIsSni(false);
        }
      } catch (error) {
        console.error('Error fetching SNI data:', error);
        setIsSni(false);
      }
    };

    // Lakukan pemanggilan API untuk memeriksa isTkdn
    const fetchTkdnData = async () => {
      try {
        const response = await fetch('URL_API_TKDN');
        const data = await response.json();
        if (data && data.tkdn) {
          setTkdn(true);
        } else {
          setTkdn(false);
        }
      } catch (error) {
        console.error('Error fetching TKDN data:', error);
        setTkdn(false);
      }
    };
    fetchSniData();
    fetchTkdnData();
    return () => {
    };
  }, []);

  useEffect(() => {
    let interval: NodeJS.Timeout;

    if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
      setCount(flashSale.remaining_time);

      interval = setInterval(() => {
        setCount((prevCount) => prevCount - 1);
      }, 1000);
    }

    return () => {
      clearInterval(interval);
    };
  }, [flashSale?.remaining_time]);

  const duration = moment.duration(count, 'seconds')

  const image = useMemo(() => {
    if (product.image) return product.image + '?ratio=square'
    return '/images/noimage.jpeg'
  }, [product.image])

  return (
    <div className={style['wrapper']}>
      {/* <div className="relative"> */}
          <ImageUI
            src={image}
            alt={product.name}
            width={256}
            height={256}
            className={style['image']}
            loading='eager'
            priority
          />
          <div className="absolute top-4 right-10 flex  ">
            <div className="gambarB ">
              {!isSni && (
                <ImageNext
                  src="/images/sni-logo.png"
                  alt="SNI Logo"
                  className="w-12 h-8 object-contain object-top   sm:h-6"
                  width={50}
                  height={50}
                />
              )}
            </div>
            <div className="gambarC  ">
              {!isTkdn && (
                <ImageNext
                  src="/images/TKDN.png"
                  alt="TKDN"
                  className="w-16 h-8 object-contain object-top  ml-1 mr-1 sm:h-6"
                  width={50}
                  height={50}
                />
              )}
            </div>
          </div>
        {/* </div> */}
      
      

      <div className={style['absolute-info']}>
        <Tooltip
          placement='bottom-end'
          label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
        >
          <div className="text-gray-600">
            <InfoIcon size={20} />
          </div>
        </Tooltip>
      </div>

      {flashSale.remaining_time > 0 && (
        <div className='absolute bottom-0 w-full h-14'>
          <div className="relative w-full h-full">
            <ImageUI
              src='/images/BG-FLASH-SALE.jpg'
              alt='Flash Sale Indoteknik'
              width={200}
              height={100}
              className={style['flashsale-bg']}
            />

            <div className={style['flashsale']}>
              <div className='flex items-center gap-x-3'>
                <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div>
                <div className={style['flashsale-text']}>
                  <ImageUI
                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                    alt='Icon Flash Sale'
                    width={20}
                    height={20}
                  />
                  {product.flash_sale.tag}
                </div>
              </div>
              <div className={style['countdown']}>
                <span>{duration.hours().toString().padStart(2, '0')}</span>
                <span>{duration.minutes().toString().padStart(2, '0')}</span>
                <span>{duration.seconds().toString().padStart(2, '0')}</span>
              </div>
            </div>

          </div>
        </div>
      )}
    </div>
  )
}

export default Image