'use client';

import { useEffect, useState } from 'react';
import {
  pushProductClicked,
  pushProductListProductViewed
} from '@theme/utils/gtm';
import { useInView } from 'react-intersection-observer';
import useFavButton from '../../hooks/use-fav-button';
import { Product } from '@akinon/next/types';
import { Image } from '@akinon/next/components/image';
import { Price, Link } from '@theme/components';

interface Props {
  product: Product;
  width?: number;
  height?: number;
  index: number;
}

export const ProductItem = (props: Props) => {
  // TODO: Static image will change (TR)
  const { product, width, height, index } = props;
  const [viewed, setViewed] = useState(false);
  const { FavButton } = useFavButton(product.pk);
  const { ref, inView } = useInView();

  const image_url = product.productimage_set[0]?.image;
  const absolute_url = product.absolute_url;
  const product_name = product.name;
  const retail_price = product.retail_price;
  const price = product.price;

  useEffect(() => {
    if (!viewed && inView) {
      setViewed(true);
      pushProductListProductViewed(product);
    }
  }, [inView, viewed, product]);

  return (
    <div
      className="text-sm text-left flex flex-col justify-between"
      data-testid="product-box"
      ref={ref}
    >
      <div className="relative mb-3 h-full">
        <Link href={absolute_url} onClick={() => pushProductClicked(product)}>
          {image_url ? (
            <Image
              fill
              loading="lazy"
              src={image_url}
              alt={product_name}
              aspectRatio={width / height}
              sizes="
              (max-width: 768px) 50vw,
              (max-width: 1024px) 30vw,
              33vw"
              crop="center"
            />
          ) : (
            <Image
              className="h-full"
              src="/noimage.jpg"
              fill
              aspectRatio={width / height}
              sizes="100vw"
              alt={product_name}
              imageClassName="object-cover"
            />
          )}
        </Link>
        <FavButton className="absolute top-4 right-4" />
      </div>
      <div>
        <Link
          href={absolute_url}
          data-testid={`${product_name}-${index}`}
          onClick={() => pushProductClicked(product)}
        >
          {product_name}
        </Link>
        <div className="font-semibold">
          {parseFloat(retail_price) > parseFloat(price) && (
            <Price
              value={retail_price}
              className="font-normal line-through mr-3"
            />
          )}
          <Price value={price} data-testid="product-price" />
        </div>
      </div>
    </div>
  );
};