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';
import useDevice from '@/core/hooks/useDevice';
type Props = {
  product: IProductDetail;
};

const Image = ({ product }: Props) => {
  const flashSale = product.flash_sale;
  const [count, setCount] = useState(flashSale?.remaining_time || 0);

  const { isDesktop, isMobile } = useDevice();

  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 (!isDesktop && product.image_mobile) {
      return product.image_mobile + '?ratio=square';
    } else {
      if (product.image) return product.image + '?ratio=square';
      return '/images/noimage.jpeg';
    }
  }, [product.image, product.image_mobile]);

  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 '>
          {product.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  '>
          {product.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;