import style from '../styles/image.module.css';

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

  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']}>
      <ImageUI
        src={image}
        alt={product.name}
        width={256}
        height={256}
        className={style['image']}
        loading='eager'
        priority
      />

      <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/GAMBAR-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